Sort the values in the jQuery Autocomplete

Question

I have an array like

[\"JOAQUIN\", \"BERNARDINO\", \"MODOC\",\"ALASKA\",\"MADERA\", \"ANDERSON\"]

where I\'m populating them in a jQuery UI

Answer 1

Try it

<input type='text' />


var json = ["JOAQUIN", "BERNARDINO", "MODOC","ALASKA","MADERA", "ANDERSON", "KINGSTONE"].sort();
$('input').autocomplete({
  source: json
 });

http://jsfiddle.net/Gm9Bz/5/

Answer 2

I faced the same issue with objects rather than simple string array, and sorting needs to be done after retrieving the results (to achieve "startswith" suggestions at the top of the list). so for future searchers, i'll add my solution.

using JQuery you can search for strings within your results object's .label that start with the user input, and merge the rest of the result to those, after merging use Underscore.js library to remove duplicates.

for example:

var objects_array = [{"label":"A_ABC","value":"0"},{"label":"B_ABC","value":"1"},{"label":"C_ABC","value":"2"}];

$(document).ready ( function() {

$('#search').autocomplete({
    source: function (request, response) {

        var results = $.ui.autocomplete.filter(objects_array, request.term);               

        var top_suggestions = $.grep(results, function (n,i) {
                                 return (n.label.substr(0, request.term.length).toLowerCase() == request.term.toLowerCase());
                              });

        var merged_results = $.merge(top_suggestions,results);

        var final_results = _.uniq(merged_results,"label");

        response(final_results);
    }
});

});

result example: http://i.stack.imgur.com/GKJ8d.png

Answer 3

Actually there is an Example in the API documentation that touches on what you requested. Here is my (somewhat shortened) take on a solution:

var json = ["JOAQUIN", "BERNARDINO", "MODOC", "ALASKA", "MADERA", "ANDERSON"].sort();
$( "#autocomplete" ).autocomplete({
  source: function(request, response) {
    // Escape regex
    var term = $.ui.autocomplete.escapeRegex(request.term);
    // Search results that start with the search term
    var matcher1 = new RegExp("^" + term, "i");
    // Search results that start differently
    var matcher2 = new RegExp("^.+" + term, "i");

    function subarray(matcher) {
        return $.grep(json, function(item) {
            return matcher.test(item);
        });
    }
    response($.merge(subarray(matcher1), subarray(matcher2)));
  }
});

Answer 4

var myarray= ["JOAQUIN", "BERNARDINO", "MODOC","ALASKA","MADERA", "ANDERSON"]
myarray.sort();

Read More

See Demo

we are passing two arguments into source one is request and second is response,

• request is stands for request object we are making, in our case it is the letter we are typing into textbox.

• response is function which will return us auto complete selection options.

now inside $.map we are checking typed words with array we have named json.

json.toUpperCase().indexOf(request.term.toUpperCase()) this line convert typed word and array to same case and return it.

and matches would be the final result which has list of item that you have asked.

and response(matches); will send it to autocomplete.