Как может я пользовательский формат результаты плагина Автоматического заполнения?
Я использую плагин Автоматического заполнения UI jQuery. Существует ли способ выделить поисковую последовательность символов в выпадающих результатах?
Например, если у меня есть “панель нечто” как данные, и я ввожу "нечто", я получу “панель нечто” в выпадающем, как это:
5 ответов
Да, можно, если автозаполнение обезьяны исправляет.
В виджете автозаполнения, включенном в v1.8rc3 пользовательского интерфейса jQuery, всплывающее окно с предложениями создается в функции _renderMenu виджета автозаполнения. Эта функция определяется следующим образом:
_renderMenu: function( ul, items ) {
var self = this;
$.each( items, function( index, item ) {
self._renderItem( ul, item );
});
},
Функция _renderItem определяется следующим образом:
_renderItem: function( ul, item) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
},
Итак, что вам нужно сделать, это заменить этот _renderItem fn вашим собственным созданием, которое дает желаемый эффект. Этот метод переопределения внутренней функции в библиотеке, который я узнал, называется monkey-patching . Вот как я это сделал:
function monkeyPatchAutocomplete() {
// don't really need this, but in case I did, I could store it and chain
var oldFn = $.ui.autocomplete.prototype._renderItem;
$.ui.autocomplete.prototype._renderItem = function( ul, item) {
var re = new RegExp("^" + this.term) ;
var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" +
this.term +
"</span>");
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + t + "</a>" )
.appendTo( ul );
};
}
Вызовите эту функцию один раз в $ (document) .ready (...) .
Это хитрость, потому что:
существует объект regexp, созданный для каждого элемента, отображаемого в списке. Этот объект regexp следует повторно использовать для всех элементов.
нет класса css, используемого для форматирования завершенной части. Это встроенный стиль.
Это означает, что если бы у вас было несколько автозаполнений на одной странице, все они обрабатывались бы одинаково. Это решит стиль css.
... но он иллюстрирует основную технику и работает для ваших основных требований.
обновлен рабочий пример: http: //output.jsbin.com / qixaxinuhe
Чтобы сохранить регистр строк соответствия, в отличие от регистра вводимых символов, используйте эту строку:
var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" +
"$&" +
"</span>");
Другими словами, начиная с исходного кода, приведенного выше, вам просто нужно заменить this.term с «$ &» .
РЕДАКТИРОВАТЬ
Вышеуказанное изменяет каждый виджет автозаполнения на странице. Если вы хотите изменить только один, см. Этот вопрос:
Как исправить * только один * экземпляр автозаполнения на странице?
Если вместо этого вы используете сторонний плагин, у него есть опция выделения: http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions
(см. Параметры tab)
Взгляните на демонстрацию поля со списком, она включает выделение результатов: http://jqueryui.com/demos/autocomplete/#combobox
Используемое здесь регулярное выражение также имеет дело с результатами html.
это тоже работает:
$.ui.autocomplete.prototype._renderItem = function (ul, item) {
item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};
комбинация ответов @ Jörn Zaefferer и @ Cheeso.
для еще более простого способа, попробуйте следующее:
$('ul: li: a[class=ui-corner-all]').each (function (){
//grab each text value
var text1 = $(this).text();
//grab user input from the search box
var val = $('#s').val()
//convert
re = new RegExp(val, "ig")
//match with the converted value
matchNew = text1.match(re);
//Find the reg expression, replace it with blue coloring/
text = text1.replace(matchNew, ("<span style='font-weight:bold;color:green;'>") + matchNew + ("</span>"));
$(this).html(text)
});
}