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

73

До 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"}]
  • 2
    Я бы тоже хотел, чтобы на это ответили, я просто сталкивался с такой же проблемой.
Теги:
autocomplete
jquery-ui-autocomplete

5 ответов

105
Лучший ответ

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

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

Поделиться
  • 0
    Что делает _renderItem? Это преобразование HTML?
  • 2
    forum.jquery.com/topic/using-html-in-autocomplete Посмотрите второй пост, он описывает все это.
Показать ещё 6 комментариев
5

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

Трюк:

Если вы не знаете, как добавить плагин в JQuery UI, то:

  • Сохраните плагин (расширение html Scott González) в файле js или загрузите файл js.
  • Вы уже добавили автозаполнение jquery-ui script на странице html (или jquery-ui js file). Добавьте этот плагин script после этого файла автозаполнения javascript.
Поделиться
1

Это решение не рекомендуется, но вы можете просто отредактировать исходный файл jquery.ui.autocomplete.js(v1.10.4)

Оригинал:

_renderItem:function(t,i){return e("<li>").append(e("<a>").text(i.label)).appendTo(t)},

Fixed

_renderItem:function(t,i){return e("<li>").append(e("<a>").html(i.label)).appendTo(t)},
Поделиться
0

У меня была проблема, упомянутая Кларенсом. Мне нужно было предоставить 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". Если он есть, он использует только это поле. Если его нет, он работает нормально.

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

Я надеюсь, что это поможет кому-то!

Поделиться
  • 2
    @PeterMortensen Я бы хотел, чтобы вы отредактировали его, добавив ссылку на Википедию в HTML.
0

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

Поделиться
  • 0
    К вашему сведению: вам не нужно это решение, если вы используете AJAX в качестве источника, потому что вы в любом случае отвечаете за фильтрацию с использованием переданного в поиске термина

Ещё вопросы

Сообщество Overcoder
Наверх
Меню