Использование HTML в автозаполнении jQuery UI - PullRequest
Новая
       24

Использование HTML в автозаполнении jQuery UI

82 голосов
/ 15 августа 2010

До 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"}]

Ответы [ 5 ]

116 голосов
/ 16 августа 2010

Добавьте это к своему коду: 

).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")

10 голосов
/ 28 июля 2013

Это также задокументировано в документации по автозаполнению jquery-ui по адресу: http://api.jqueryui.com/autocomplete/#option-source

Хитрость:

  1. Использование этого расширения пользовательского интерфейса jQuery
  2. Затем в опции автозаполнения введите autocomplete({ html:true});
  3. Теперь вы можете передать html &lt;div&gt;sample&lt;/div&gt; в поле «метка» вывода JSON для автозаполнения.

Если вы неНе знаю, как добавить плагин в пользовательский интерфейс JQuery:

  1. Сохраните плагин (расширение html Скотта Гонсалеса) в js-файл или загрузите js-файл.
  2. У вас уже естьдобавил скрипт автозаполнения jquery-ui на вашу html-страницу (или js-файл jquery-ui).Добавьте этот скрипт плагина после автозаполнения файла JavaScript.
1 голос
/ 02 июля 2014

Это решение не рекомендуется, но вы можете просто отредактировать исходный файл 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)},
0 голосов
/ 12 января 2013

У меня была проблема, упомянутая Кларенсом. Мне нужно было предоставить HTML , чтобы красиво выглядеть со стилями и изображениями. Это привело к вводу "div", совпадающему со всеми элементами.

Тем не менее, мое значение было только ID-номером, поэтому я не мог позволить, чтобы поиск начинался только с этого. Мне нужен был поиск, чтобы искать несколько значений, а не только идентификационный номер.

Мое решение состояло в том, чтобы добавить новое поле, содержащее только значения поиска, и проверить это в файле пользовательского интерфейса 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». Если он есть, он использует только это поле. Если его там нет, он работает как обычно.

Затем вы используете автозаполнение точно так же, как и раньше, за исключением того, что вы можете добавить ключ "searchonly" к вашему объекту JSON.

Надеюсь, это кому-нибудь поможет!

0 голосов
/ 22 ноября 2011

У меня была такая же проблема, но я предпочитаю использовать статический массив опций для моей опции ('source') для производительности. Если вы попробовали это с этим решением, вы обнаружите, что jQuery выполняет поиск и по всей метке.

EG, если вы предоставили: 

[{"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.

...