jQuery UI Автозаполнение начинается с

Question

Я использую автозаполнение пользовательского интерфейса jQuery с локальным источником данных (source: myArray). Я хочу, чтобы автозаполнение предлагало только результаты, которые начинаются с введенной строки вместо стандартного регистрозависимого поиска . Есть ли простое решение для этого, или я должен предоставить свой собственный обратный вызов поиска / источника?

Answer 1

Смотрите это:

Начальное слово для совпадения:

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

Он переопределяет метод фильтра автозаполнения. Я использую это, и это работает хорошо.

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

Слово соответствия:

Совпадение начинается с любого слова в строке.

например. "LHR london" соответствует "london"

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

\ b утверждать положение на границе слова (^ \ w | \ w $ | \ W \ w | \ w \ W)

Answer 2

В настоящее время я сделал это так, не уверен, что есть лучшее решение:

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

Этот подход также позволил наложить ограничение (например, 10 позиций) на количество отображаемых элементов.

Answer 3

Вы можете использовать тот же способ в Примеры автозаполнения интерфейса пользователя Jquery

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

ИЛИ другим способом с использованием $.map метода, а не $.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

Вот немного другой способ поиска с учетом регистра.Обратите внимание на отсутствие «i» при создании регулярного выражения во втором примере, что является причиной нечувствительности к регистру в реализации по умолчанию.

без учета регистра:

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

с учетом регистра:

            $('#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

Я вошел в код Jqueryui и переключил его там.

Если вы загляните в раздел автозаполнения, вы увидите следующую строку:

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

Измените его следующим образом (будьте осторожны, это глобальное изменение):

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