12

I am using the jQuery-autocomplete plugin to get suggestions for completion of the input string using an AJAX call to a server. Also, the server takes care of returning the results in the order I would want them to appear but autocomplete shows them in a different order.

How can I configure jQuery autocomplete to not reorder the output ? I don't require any kind of processing on the client's end as the data has already been ranked/sorted as required.

rajatkhanduja
  • 974
  • 1
  • 9
  • 28
  • what you mean by "auto complete shows them in a different order" ? – Shyju Jun 08 '12 at 12:35
  • I mean that the order of strings displayed in the dropdown is different from that returned by the server, (which is a string of "\n" separated sequence of characters, as given in the documentation). – rajatkhanduja Jun 08 '12 at 13:52

3 Answers3

20

Simply sorting the server results before sending it to autocomplete should do it.

So before you echo json_encode($return_arr); use the sort() function on $return_arr

You can also try something like this:

The logic is to build up an array of matches that start with the term, and then concatenate that with matches that contain the term but don't start with it.

$(document).ready(function () {
    var source = ['Adam', 'Benjamin', 'Matt', 'Michael', 'Sam', 'Tim'];
    $("input").autocomplete({
        source: function (request, response) {
            var term = $.ui.autocomplete.escapeRegex(request.term)
                , startsWithMatcher = new RegExp("^" + term, "i")
                , startsWith = $.grep(source, function(value) {
                    return startsWithMatcher.test(value.label || value.value || value);
                })
                , containsMatcher = new RegExp(term, "i")
                , contains = $.grep(source, function (value) {
                    return $.inArray(value, startsWith) < 0 &&
                        containsMatcher.test(value.label || value.value || value);
                });

            response(startsWith.concat(contains));
        }
    });
});

Example: http://jsfiddle.net/zkVrs/

Source: https://stackoverflow.com/a/8302996/973155

Community
  • 1
  • 1
Farhan Ahmad
  • 5,148
  • 6
  • 40
  • 69
  • 1
    `the server takes care of returning the results in the order I would want them to appear but autocomplete shows them in a different order.` It sounds like the OP is already doing this. – Dennis Jun 08 '12 at 12:41
  • http://stackoverflow.com/a/8302996/277923 I read this from the above link, but I am unable to fathom how can I use this to do 'no sorting' at all. I would like jQuery-autocomplete to show the result in the order returned by the ajax call. – rajatkhanduja Jun 08 '12 at 13:55
  • I have shared the relevant code in the next answer http://stackoverflow.com/a/10950584/277923 – rajatkhanduja Jun 08 '12 at 14:22
  • 2
    Farhan, if you didn't write the above code, it's etiquette to share its source. Andrew Whitaker posted this last year in the link rajatkhanduja mentioned above. – Pierre Mar 26 '13 at 15:54
  • 1
    this is perfect! Sorting items that start with the term before alphabetical sort is a huge usability improvement when autocompleting large sets. Thanks! – monopoint Feb 13 '14 at 11:39
  • http://stackoverflow.com/questions/38857001/autocomplete-search-for-a-specific-key-word answer please – nouman arshad Aug 10 '16 at 14:46
11

Well, it turned out to be simpler than I thought. I decided to read the code of the plugin and modify it by commenting out the code that sorts my output.

That is when I found a variable 'sortResults:true' in defaults. So, all I needed was to set that variable to false. I didn't find this in the documentation though.

$('#search').autocomplete ( { url: "index.php", sortResults: false } )

Now the output is in the exact order that I require.

I got the idea of reading the code to find/solve the problem from here : jQuery "Autocomplete" plugin is messing up the order of my data (That isn't the same plugin)

Thanks. :)

Community
  • 1
  • 1
rajatkhanduja
  • 974
  • 1
  • 9
  • 28
  • Will surely do that, after 48 hours. – rajatkhanduja Jun 08 '12 at 14:34
  • That's more like it, so much easier to display the pre-processed result from the server than doing it client side. +1 – Andreas Aug 06 '13 at 13:53
  • 4
    Are you sure you are using the [jQuery UI AutoComplete widget](http://api.jqueryui.com/1.8/autocomplete/) ? I've browsed the GitHub source and API documentation and 1. the url parameter does not exist 2. sortResults never appears anywhere in the source (the 1.8 version) ... – janv8000 May 19 '14 at 07:05
  • `sortResults` doesn't exist as an option and this doesn't seem to work. Thoughts? – T. Brian Jones Jun 05 '15 at 23:41
1

Since there's no sortResults options in current build of jQuery Autocomplete plugin, I had to search another solution to this problem and found out the only reason the plugin is sorting result is that server response is being normalized everytime it's not a pure array with objects {label: ..., value: ...}.

Considering PHP as a language of your use, json_encode(array_values($your_array)); should do the trick.

sKopheK
  • 149
  • 13
  • Thanks @sKopheK! Just to clarify, provide this to the source function's response parameter: `[ {label: "suggestion", value: "suggestion"}, ]` -- not this: `["suggestion",]` – joeymink Jul 13 '15 at 19:57