Ответ 1
В jQuery UI v1.8rc3, виджет автозаполнения принимает source, который может быть либо строкой, либо массивом, либо функцией обратного вызова. Если это строка, автозаполнение делает GET на этом URL-адресе, чтобы получить параметры/предложения. Если массив, автозаполнение выполняет поиск, как вы указали, для наличия типизированных символов в любой позиции в терминах массива. Окончательный вариант - это то, что вы хотите - функция обратного вызова.
Из документации автозаполнения:
Третий вариант, обратный вызов, обеспечивает максимальную гибкость и может использоваться для подключения любого источника данных к автозаполнению. Обратный вызов получает два аргумента:
• Объект
request
с единственным свойством, называемым "term", который ссылается на значение, которое в настоящее время присутствует в текстовом вводе. Например, когда пользователь вводил "новое лет" в поле города, которое настроено на выполнение автозаполнения,request.term
будет удерживать "новый год".
• Функцияresponse
, обратный вызов, который ожидает, что один аргумент будет содержать данные, предлагаемые пользователю. Эти данные должны быть отфильтрованы на основе предоставленного термина и должны быть массивом в формате, разрешенном для простых локальных данных: 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);
, который ускоряет поиск так что любые регулярные выражения, содержащиеся в тексте, введенном пользователем, рассматриваются как простой текст. Например, точка (.) Имеет смысл для регулярного выражения. Я узнал об этой функции escapeRegex, прочитав исходный код автозаполнения. - строка с
new Regexp()
. Он задает регулярное выражение, начинающееся с ^ (Circumflex), что подразумевает, что оно будет соответствовать только тогда, когда типизированные символы появятся в начале члена в массиве, чего вы хотели. Он также использует опцию "i", которая подразумевает нечувствительность к регистру. - утилита
$.grep()
просто вызывает предоставленную функцию для каждого термина в предоставленном массиве. Функция в этом случае просто использует regexp, чтобы увидеть, соответствует ли член в массиве для того, что было напечатано. - наконец, responseFn() вызывается с результатом поиска.
рабочая демонстрация: http://jsbin.com/ezifi
как выглядит:
Просто примечание: я считаю, что документация по автозаполнению будет довольно незрелой на данный момент. Я не нашел примеров, которые сделали это, и я не мог найти рабочий документ, для которого необходимы файлы .css или какие классы .css будут использоваться. Я узнал все это от проверки кода.
См. также как я могу настроить параметры подключаемого модуля Autocomplete?