0

I am using Jquery autocompleter with a list of about 200 items. When I type a character into the box it suggests all the 100-150 options at once.

The list is so long it extends well beyond the page bottom border and also gives horrible performance.

How can I limit the number of options displayed to a reasonable number like 5 or 6?

The official documentation given here does not help.

What is the way to limit the length of the list? Is there another autocompleter library that offers good performance?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Kshitiz Sharma
  • 17,947
  • 26
  • 98
  • 169
  • One way is to limit the possible options at server side. How would the autocomplete plugin itself decide which suggestions to keep and drop if you asked it to display 10 options from 100? – Hari Nov 08 '12 at 12:34
  • @Hari Limiting it on the server side would mean a lot more work. The autocomplete should filter the list on basis of characters typed and show top 10 matching entries. – Kshitiz Sharma Nov 08 '12 at 12:37
  • 2
    IMO Limiting the options without relevance calculation wouldn't be too nice and a relevance calculation (if possible at all for word fragments) is out of the scope of an autocomplete plugin. You can limit the options as shown in one of the answers below I just want to point out why such a feature shouldn't be part of the plugin. – Hari Nov 08 '12 at 12:48
  • @Hari I have no idea what you mean by relevance calculation. Its plain character matching. Like showing Car, Carpet when Ca is typed, or showing 2345 when 23 is typed. The same thing would happen on the server. – Kshitiz Sharma Nov 08 '12 at 12:52
  • Yes, its plain character matching untill you don't want to filter the matching results. During filtering you have a number of equivalent options, how do you decide which ones to filter out? Not showing a matching option can be dangerous so I agree with the authors that they didn't include such an option. – Hari Nov 08 '12 at 13:40
  • possible duplicate of [limit results in jquery ui autocomplete](http://stackoverflow.com/questions/7617373/limit-results-in-jquery-ui-autocomplete) – Gunther Piez Nov 09 '12 at 08:13

2 Answers2

0

Use:

$(".classThatNeedsTheAutoComplete").autocomplete({
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(myarray, request.term);

        response(results.slice(0, 10));
    }
});

This was found in Limit results in jQuery UI Autocomplete.

Community
  • 1
  • 1
Geert
  • 1,217
  • 8
  • 20
0

http://api.jqueryui.com/autocomplete/#option-minLength

If you use the minLength option, for example 3, then the user would have to type three characters before the filter starts.

This would result in less results than for example 1. You could also use slice.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Riaan Walters
  • 2,587
  • 2
  • 18
  • 30