До jQuery UI 1.8.4 я мог использовать HTML в массиве JSON, который я создал для работы с автозаполнением.
Мне удалось сделать что-то вроде:
$row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>';
Это будет отображаться как красный текст в раскрывающемся списке.
Начиная с версии 1.8.4 это не работает. Я нашел http://dev.jqueryui.com/ticket/5275 , который говорит мне , чтобы использовать пример пользовательского HTML здесь , которые у меня не было никакой удачи с.
Как я могу сделать так, чтобы HTML отображался в предложении?
Мой jQuery:
<script type="text/javascript">
$(function() {
$("#findUserIdDisplay").autocomplete({
source: "ui_autocomplete_users_withuname.php",
minLength: 2,
select: function(event, ui) {
$('#findUserId').val(ui.item.id);
}
});
});
</script>
Мой массив JSON включает HTML, как показано ниже:
[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]
Ответы:
Добавьте это в свой код:
).data( "autocomplete" )._renderItem = function( ul, item ) { return $( "<li></li>" ) .data( "item.autocomplete", item ) .append( "<a>"+ item.label + "</a>" ) .appendTo( ul ); };
Итак, ваш код становится:
<script type="text/javascript"> $(function () { $("#findUserIdDisplay").autocomplete({ source: "ui_autocomplete_users_withuname.php", minLength: 2, select: function (event, ui) { $('#findUserId').val(ui.item.id); return false; } }).data("ui-autocomplete")._renderItem = function (ul, item) { return $("<li></li>") .data("item.autocomplete", item) .append("<a>" + item.label + "</a>") .appendTo(ul); }; }); </script>
Примечание. В старых версиях jQueryUI используйте
.data("autocomplete")"
вместо.data("ui-autocomplete")
источник
<a>
вы не сможете щелкнуть / прокрутить элемент.Это также задокументировано в документации автозаполнения jquery-ui по адресу: http://api.jqueryui.com/autocomplete/#option-source
Уловка заключается в следующем:
autocomplete({ html:true});
<div>sample</div>
в поле «label» вывода JSON для автозаполнения.Если вы не знаете, как добавить плагин в JQuery UI, тогда:
источник
Это решение не рекомендуется, но вы можете просто отредактировать исходный файл jquery.ui.autocomplete.js (v1.10.4)
Оригинал:
_renderItem:function(t,i){return e("<li>").append(e("<a>").text(i.label)).appendTo(t)},
Исправлена:
_renderItem:function(t,i){return e("<li>").append(e("<a>").html(i.label)).appendTo(t)},
источник
У меня была такая же проблема, но я предпочитаю использовать статический массив параметров для моей опции («источник») для повышения производительности. Если вы попробовали это с помощью этого решения, вы обнаружите, что jQuery выполняет поиск по всей этикетке.
Например, если вы предоставили:
[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}]
Тогда ввод "span" будет соответствовать обоим результатам, чтобы заставить его искать по значению, только переопределив
$.ui.autocomplete.filter
функцию:$.ui.autocomplete.filter = function(a,b){var g=new RegExp($.ui.autocomplete.escapeRegex(b),"i");return $.grep(a,function(c){return g.test(c.value||c)})}
Вы можете изменить последний параметр
c.value
на все, что захотите, напримерc.id || c.label || c.value
, позволит вам искать по метке, значению или идентификатору.Вы можете указать любое количество ключей и значений для исходного параметра автозаполнения.
PS: исходный параметр есть
c.label||c.value||c
.источник
У меня была проблема, о которой говорил Кларенс. Мне нужно было предоставить HTML, чтобы красиво оформить стили и изображения. Это привело к тому, что набрал «div», соответствующий всем элементам.
Однако моим значением был только идентификационный номер, поэтому я не мог позволить поиску запускаться только на нем. Мне нужен поиск, чтобы искать несколько значений, а не только идентификационный номер.
Мое решение заключалось в том, чтобы добавить новое поле, содержащее только значения поиска, и проверить это в файле пользовательского интерфейса jQuery. Вот что я сделал:
(Это в jQuery UI 1.9.2; может быть то же самое в других.)
Отредактируйте функцию фильтра в строке 6008:
filter: function (array, term) { var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i"); return $.grep(array, function (value) { if (value.searchonly == null) return matcher.test(value.label || value.value || value); else return matcher.test(value.searchonly); }); }
Я добавил проверку для поля "value.searchonly". Если он там есть, он использует только это поле. Если его нет, он работает как обычно.
Затем вы используете автозаполнение точно так же, как и раньше, за исключением того, что вы можете добавить ключ «только для поиска» в свой объект JSON.
Надеюсь, это кому-то поможет!
источник