i would like to know if theres a way to count the number of results which are displayed when you type something in the textbox. Count the li-elements work, but i bet theres a smarter way. Thanks
Add a comment
|
5 Answers
I don't think this is possible directly using JQueryUI Events. I've looked for a way without success.
All the events associated only return the element clicked (after the list is displayed), or information about the event (not about the list).
You can see it here: http://jqueryui.com/demos/autocomplete/#event-focus
What you said is the closest solution:
$( "#tags" ).autocomplete({
source: availableTags,
open: function(event,ui){
var len = $('.ui-autocomplete > li').length;
$('#count').html('Found '+len+' results');
}
});
Comments
The solution above did not work for me when I was typing something that returns no results. It keeps showing the amount of results from the last matching string. Here's a solution that did work.
source: function (request, response) {
$.getJSON(
"/Ajax/GetSomeJson.ashx",
{ q: request.term },
function (data) {
console.log(data.length);
$('#count').html('Found '+ data.length +' results');
response($.map(data, function (item) {
return item;
}));
}
);
}
Comments
I found a way to count the matches found, based on Fran's answer, but I think it's not 100% reliable. Still, it works for me.
$('#autocompleteinput').autocomplete({
source: datasource,
search: function()
{
$(this).data('count',0);
},
open: function()
{
$(this).data('count',$('.ui-autocomplete > li').length);
},
delay: 0
}).keyup(function(){
$('#count').html('Found '+$(this).data('count')+' items');
});
The delay has to be 0, or often it will trigger the keyup before the search and it won't count well.
Comments
This is Working for me. My requirement is to auto select on on blur event if there is only one matching result. Previously I tried var len= $('.ui-autocomplete > li').length; but i did not work in all scenarios. Sometimes it adds up previous results to count/length.
Below code worked for me:
.on('autocompletechange', function() {
if ($(this).data('ui-autocomplete').selectedItem === null && ($(this).autocomplete("widget").find( "li" ).length == 1) ) {
//this will trigger your select automatically so it will handle other custom override you did for select
$(this).data('ui-autocomplete').menu.element.children('li:first').children('a').trigger('click');
}
})
Comments
Fran's answer is nice but it will count 'li' from from all '.ui-autocomplete' on the page. This solution will count 'li' elements only from current auto-complete: http://www.jbmurphy.com/2012/04/27/how-to-get-the-count-of-items-returned-in-jquery-autocomplete/
open: function(event,ui){
var len = $(this).autocomplete("widget").find( "li" ).length;
},
