Как отфильтровать данные автозаполнения JQuery при вводе - PullRequest
Новая
       12

Как отфильтровать данные автозаполнения JQuery при вводе

3 голосов
/ 12 октября 2011

Пока у меня есть следующее 

var aCleanData = ['aaa','aab','faa','fff','ffb','fgh','mmm','maa'];

$('#my-input').autocomplete({
    source:aCleanData,
    minLength:2
});

В настоящее время, если вы наберете aa, отобразится aaa,aab,faa,maa.

Я хотел бы, чтобы пользователь набрал ff, а отображаемые данные будут fff,ffb.

По сути, только то, что набрано, должно соответствовать первому символу и далее.

Это должно быть рекурсивно. Когда пользователь вводит fg, fff,ffb должен исчезнуть и должен появиться только fgh.

Заранее спасибо за помощь.

UPDATE:

p.s. Посмотрите, что я имею в виду здесь:

http://jqueryui.com/demos/autocomplete/#default

Введите sc, и вы увидите больше, чем просто данные, начинающиеся с sc.

Ответы [ 3 ]

11 голосов
/ 12 октября 2011

Одним из возможных решений для получения только результатов, начиная с входного значения, является проверка элементов массива перед поиском самостоятельно: 

var aCleanData = ['aaa','aab','faa','fff','ffb','fgh','mmm','maa'];
$('#my-input').autocomplete({
    source: aCleanData,
    minLength: 2,
    search: function(oEvent, oUi) {
        // get current input value
        var sValue = $(oEvent.target).val();
        // init new search array
        var aSearch = [];
        // for each element in the main array ...
        $(aCleanData).each(function(iIndex, sElement) {
            // ... if element starts with input value ...
            if (sElement.substr(0, sValue.length) == sValue) {
                // ... add element
                aSearch.push(sElement);
            }
        });
        // change search array
        $(this).autocomplete('option', 'source', aSearch);
    }
});

Также смотрите мой jsfiddle .

3 голосов
/ 12 октября 2011

После поиска источника автозаполнения у вас есть несколько вариантов. Вы можете написать свой собственный метод pasrer, который возвращает то, что вам нужно, и установить его в качестве источника обратного вызова. Это, вероятно, более «правильный» способ сделать это.

Более быстрый способ - просто добавить следующую строку ПОСЛЕ включения источника пользовательского интерфейса: 

$.ui.autocomplete.escapeRegex=function(){ 
    return '[^|\s]' + $value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");   
};

Если вам интересно, как это работает (или должно работать, я не проверял):

Исходный код расширяет ui.autocomplete двумя статическими функциями: 

$.extend( $.ui.autocomplete, {
escapeRegex: function( value ) {
    return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
},
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 );
    });
}
});

Все, что вам нужно сделать, это изменить то, что escapeRegex возвращает для поиска начала, если только слова. Устанавливая значение escapeRegex для возврата '[^|\s]' перед исходным возвратом, мы говорим: «Ищите работу с пробелом перед или в начале строки»

1 голос
/ 12 октября 2011

Я думаю, что вы используете jQuery UI - Автозаполнение .Один тип поиска отличается от того, что вы хотите сделать.Но этот может быть прикрытием для ваших нужд.

...