开发者

jquery ui autocomplete: count results

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


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');
  }
});


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;
            }));
        }
    );
}


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.


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');
        }
    })


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;
    },
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜