jQuery UI Autocomplete use startsWith

Question

I'm using the jQuery UI Autocomplete with a local datasource (source: myArray). I want the autocomplete to propose only the results that start with the string entered instead of the default case-insensitive contains search. Is there a simple solution for this or do I have to provide my custom search/source callback?

Answer 1

See this:

Match start word:

http://blog.miroslavpopovic.com/jqueryui-autocomplete-filter-words-starting-with-term

He overrides the autocomplete filter method. I use this and it works well.

// Overrides the default autocomplete filter function to search only from the beginning of the string
$.ui.autocomplete.filter = function (array, term) {
    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
    return $.grep(array, function (value) {
        return matcher.test(value.label || value.value || value);
    });
};

Match word:

Match startsWith of any word in the string.

e.g. "LHR london" is matched by "london"

var matcher = new RegExp("\\b" + $.ui.autocomplete.escapeRegex(term), "i");

\b assert position at a word boundary (^\w|\w$|\W\w|\w\W)

Answer 2

Currently I've done it this way, not sure if there is a better solution:

source: function(request, response) {
    var filteredArray = $.map(orignalArray, function(item) {
        if( item.value.startsWith(request.term)){
            return item;
        }
        else{
            return null;
        }
    });
    response(filteredArray);
},

This approach also made it possible to impose a limit (e.g. 10 items) on the amount of items to be shown.

Answer 3

you can use Same way into Jquery UI Autocomplete Examples

<script>
$("#autocompleteInputField").autocomplete({
  source: function(request, response) {
          var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
          response($.grep(myArray, function(item){
              return matcher.test(item);
          }) );
      }
});
</script>

OR another way with using $.map method not $.grep

<script>
$("#autocompleteInputField").autocomplete({
  source: function(request, response) {
          var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
          response($.map(myArray, function(item) {
               if (matcher.test(item)) {
                   return (item)
               }
          }));
      }
});
</script>

Answer 4

Here's a slightly different way to do case sensitive searching. Note the lack of "i" in the creation of the regexp in the second example, which is what causes case insensitivity in the default implementation.

case insensitive:

            $('#elem').autocomplete({
                source: array
            });

case sensitive:

            $('#elem').autocomplete({
                source: function(request, response) {
                    var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term, ""));
                    var data = $.grep( array, function(value) {
                        return matcher.test( value.label || value.value || value );
                    });
                    response(data);
                }
            });

Answer 5

I went into the Jqueryui code and switched it there.

If you look in the auto complete section, you will see the following line:

filter:function(a,b){var g=new RegExp(d.ui.autocomplete.escapeRegex(b),"i")

Modify it to the following (beware, this is a global change):

filter:function(a,b){var g=new RegExp("^" + d.ui.autocomplete.escapeRegex(b),"i")

Answer 6

source: function( request, response ) {
                var t = jQuery.grep(t, function(a){
                        var patt = new RegExp("^" + request.term, "i");
                        return (a.match(patt));
                    });
                response(t);
            },