jQuery виджет Автоматического заполнения UI ищет конфигурацию

В пользовательском интерфейсе jQuery v1.8rc3 виджет автозаполнения принимает параметр source, который может быть строкой, массивом или функцией обратного вызова. Если это строка, автозаполнение выполняет GET для этого URL-адреса, чтобы получить параметры и предложения. Если массив автозаполнения выполняет поиск, как вы указали, на наличие типизированных символов в любой позиции в терминах массива. Последний вариант - это то, что вы хотите - функция обратного вызова.

Из документации по автозаполнениям:

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

• Объект request с одним свойством с именем "term", которое ссылается на значение, которое в данный момент находится в текстовом вводе. Например, когда пользователь ввел «new yo» в поле города, настроенном на автозаполнение, request.term будет содержать «new yo».
• Функция отклик, обратный вызов, который ожидает, что один аргумент будет содержать данные, которые будут предложены пользователю. Эти данные должны быть отфильтрованы на основе предоставленного термина и должны быть массивом в формате, разрешенном для простых локальных данных: String-Array или Object-Array с меткой/значением/обоими свойствами.

Пример кода:

var wordlist= [ "about", "above", "across", "after", "against",
                "along", "among", "around", "at", "before", 
                "behind", "below", "beneath", "beside", "between", 
                "beyond", "but", "by", "despite", "down", "during", 
                "except", "for", "from", "in", "inside", "into", 
                "like", "near", "of", "off", "on", "onto", "out", 
                "outside", "over", "past", "since", "through", 
                "throughout", "till", "to", "toward", "under", 
                "underneath", "until", "up", "upon", "with", 
                "within", "without"] ; 

$("#input1").autocomplete({
    // The source option can be an array of terms.  In this case, if
    // the typed characters appear in any position in a term, then the
    // term is included in the autocomplete list.
    // The source option can also be a function that performs the search,
    // and calls a response function with the matched entries.
    source: function(req, responseFn) {
        var re = $.ui.autocomplete.escapeRegex(req.term);
        var matcher = new RegExp( "^" + re, "i" );
        var a = $.grep( wordlist, function(item,index){
            return matcher.test(item);
        });
        responseFn( a );
    }
});

Несколько ключевых моментов:

• вызов $.ui.autocomplete.escapeRegex(req.term); Что ускользает от поискового запроса таким образом, чтобы любые термины, значимые для регулярного выражения, в тексте, вводимом пользователем, рассматривались как обычный текст. Например, точка (.) имеет значение для regex. Я узнал об этой функции escapeRegex, прочитав исходный код автозаполнения.
• строка с новым Regexp(). Он задает regexp, начинающийся с ^ (Circumflex), что подразумевает, что он будет совпадать только тогда, когда типизные символы появятся в начале термина в массиве, что и нужно. Он также использует опцию «i», которая подразумевает нечувствительное к регистру соответствие.
• $.grep() Утилита просто вызывает предоставленную функцию для каждого термина в предоставленном массиве. Функция в этом случае просто использует regexp, чтобы увидеть, соответствует ли термин в массиве тому, что было набрано.
• Наконец, вызывается responseFn() с результатом поиска.

Рабочая демонстрация: http://jsbin.com/ezifi

Как это выглядит:

Просто примечание: я нахожу документацию по автозаполнения довольно незрелой на данный момент. Я не нашел примеров, которые делали бы это, и я не мог найти рабочий документ, для которого .css файлы были необходимы или какие .css классы будут использоваться. Обо всем этом я узнал, проверив код.

См. также Как настроить форматирование результатов подключаемого модуля автозаполнения?