jqueryui autocomplete number of suggestions

Question

I'm working with the jqueryUI autocomplete script. The thing is that I want to limit the number of suggestions it provides to 6, as it is offering too much suggestions. This is the script:

$.get('file.txt', function(x) {

    var i;
    var pos = 0;
    var availableTags = [];

    x = x.split(/[\#\n]+/);

    for (i = 0; i < x.length; i = i + 4)
      availableTags[pos++] = x[i];

    console.log(availableTags);

    $(function() {
      $("#search").autocomplete({source: availableTags});
      response(availableTags.slice(0, 6));
    });

    }, 'text');

I spotted and excellent solution by Andrew Whitaker but can't make it work. He suggested to use

response(availableTags.slice(0, 6));

Any solution to limit the number of suggestions on my script?

michal pavlik · Answer 1 · 2015-09-04T11:36:27.637

2

you can override _renderMenu function to display maximum N items

$.ui.autocomplete.prototype._renderMenu = function( ul, items ) {
   var self = this;
   $.each( items, function( index, item ) {
      if (index < 10) // here we define how many results to show
         {self._renderItem( ul, item );}
      });
}

or with slice response:

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

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

edited Sep 04 '15 at 11:36

answered Sep 04 '15 at 10:03

michal pavlik

330
3
18

Thanks a lot michal pavlik, works almost perfect but affects to the html result and css. Do you mind if I wait for a simpler answer? – Kathlyn Sep 04 '15 at 10:48
sure, I edited my post and added simpler solution with slice results. – michal pavlik Sep 04 '15 at 11:41
Well, the second just doesn't work :'( but it's maybe my fault. I edited the code in my question in order to show you how I included your code. Do you spot any mistakes? – Kathlyn Sep 04 '15 at 11:46
you don't have closed brace after autocomplete function. There should be `});` on 3rd line from bottom – michal pavlik Sep 04 '15 at 11:55
I'm so sorry mike, man, but it kees not working... :(( updated in my question too – Kathlyn Sep 04 '15 at 11:59
It might be related to the source, which used to be source: availableTags – Kathlyn Sep 04 '15 at 12:01
before autocomplete you have `$(function() {` which should'nt be there – michal pavlik Sep 04 '15 at 12:13
Jesuschrist, don't be angry with me but it doesn't work. I feel I'm driving you frantic :( Updated my question – Kathlyn Sep 04 '15 at 12:19
Your first code (now in the first square of your answer) is just great. The only problem it gives me is that, when I clic on the suggestion, it is not written in the input text field. is that easy to fix? – Kathlyn Sep 04 '15 at 15:39

score 0 · Answer 2 · answered Sep 04 '15 at 10:14

$(function() {
    var limit = 3;
    var tags = [
      "hello","hi", "him", 'here',"his", "honour", "banquet"
    ];
    $( "#search" ).autocomplete({
        source: tags.slice(0, limit),

        });
});

Please find above solution and let me know if it works for you.

jqueryui autocomplete number of suggestions

2 Answers2