I have a autocomplete function. Upon generating a selectin on the input box, how can I get a return number of the choice?
$(this)
.autocomplete({
.
.
.select: function(event, ui){
$(this).val(ui.item.value); //$(this) will be input with selected value
alert(ui.item.count); // how can I get the count of the selected item?
},
});
ie autocomplete generate
apple
pear
orange.
when I select pear, it return me 2.
I found a way to get the information you're looking for, but it's hopefully not the best way or the only way.
$(this).autocomplete({
select: function(event, ui){
// blah
},
open: function(event, ui) {
console.log($(this).next().next().children());
}
});
The open event is "Triggered when the suggestion menu is opened or updated." At that point, the autocomplete widget has created dom elements with their own click listeners for selection just after the <input> that the autocomplete is attached to. (There's also a <span> created, which is why I call .next() twice.) But that line of code in the open function will return you the list of <li> child nodes on the <ul> which gets created inside.
Matching up against your example, you would get a jQuery collection of <li> elements for the following HTML markup:
<li class="ui-menu-item" role="presentation">
<a id="ui-id-0" class="ui-corner-all" tabindex="-1">apple</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-1" class="ui-corner-all" tabindex="-1">pear</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-2" class="ui-corner-all" tabindex="-1">orange</a>
</li>
Important Note: The id tag here is not the numerical index of the elements. It is instead the absolute ID of the element in the original source. As such, you have no guarantee that they are sequential. As an example, if the original source is actually this: ["apple", "banana", "pear", "starfruit", "grape", "orange"], then the id's of the <a> tags for the resulting data will actually be apple: ui-id-0, pear: ui-id-2, orange: ui-id-5. You cannot rely on this id to give you the ordering of the item that the user clicked in the list as it is absolute to the source instead of relative to the result set.
(I also originally had the ids in my list starting at 1, which as Hogan points out, they start at 0.)
At that point, you can do one of two things to get you the rest of the way. The first is to store the collection (raw or transformed, as in object format) in some variable that will be in scope in the select event callback. I would recommend transforming the list into an object like the following:
lastResultSet = {
apple : 1,
pear : 2,
orange : 3
}
Then your .select code could just do this:
var selectedIndex = lastResultSet[$(this).val(ui.item.value)];
The other approach would be to set your own .click callbacks on the <li><a> dom elements to capture the index at that point. I don't recommend this because you could easily interfere with the autocomplete behavior or cause a memory leak by not getting the click handlers unbound and disposed before the <li> dom elements are destroyed by the autocomplete.
Regardless, I suggest you ask this same question on the jQuery UI forums or IRC support channel and hopefully someone can get you an answer that doesn't so fragily rely on an implied order of Dom elements.
You can do it like this and return a number from 0 to number of items -1
HOWEVER, this depends on internal jQuery.UI code and should probably not be used.
.select: function(event, ui){
var idElements = event.toElement.id.split("-");
var num = idElements[idElements.length-1];
alert(num);
},
How it works:
As Patrick M pointed out (well he was off by one) internally the autocomplete creates elements that look like this:
<li class="ui-menu-item" role="presentation">
<a id="ui-id-0" class="ui-corner-all" tabindex="-1">apple</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-1" class="ui-corner-all" tabindex="-1">pear</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-2" class="ui-corner-all" tabindex="-1">orange</a>
</li>
My code grabs the id of the selected element and then parses for the "sequence number" at the end.
It is a BAD idea to use the internally generated UI code this way, but it works for now.
Much better to not use UI's internal representation and instead implement something similar to what Patrick M suggests. OR Grab the UI code for autocomplete from GIT and add it to your project, then you know that changes to that file won't break your code (however, other changes to UI might.)
You could also suggest a change to the team to include this index in the event.
Just use jQuery Autocomplete's reponse event.
$(this).autocomplete({
response: function( event, ui ) {
alert(ui.content.length);
}
});
DEMO: http://jsfiddle.net/dirtyd77/SLGdE/12/
Hope this helps!
NOTE: this does work with ajax.
ui.content here completely supersedes the li manipulation I suggest in my answer. +1 - I should have read more documentation.