jQuery UI Autocomplete use startsWith

问题:

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?

回答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)

回答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.

回答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>

回答4:

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")

回答5:

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);
                }
            });

回答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);
            },