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

Question

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

Answer 1

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

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

Примечание: На старых версиях использования jqheryui .data("autocomplete")" вместо .data("ui-autocomplete")

Answer 2

Это также документируется в документации AutoComplete jQuery-ui по адресу:http://api.jqueryui.com/autocomplete/#options-source

Хитрость:

1. Используйте это расширение jQuery ui
2. Тогда в автозаполненном варианте пройти autocomplete({ html:true});
3. Теперь вы можете пройти HTML <div>sample</div> В поле «Этикетка» выхода JSON для автозаполнения.

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

1. Сохраните плагин (Scott González 'HTML-расширение) в файле JS или загрузите файл JS.
2. Вы уже добавили скрипт AutoComplete jQuery-ui на странице HTML (или файл jQuery-ui js). Добавьте этот скрипт плагина после этого файла автозаполнения JavaScript.

Answer 3

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

Answer 4

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

Вы можете поставить как можно больше ключевых / значений для исходного параметра AutoComplete, как вы хотите.

PS: оригинальный параметр c.label||c.value||c.

Answer 5

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

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

Мое решение было добавить новое поле, которое удерживало только значения поиска и проверяйте, что в файле jQuery ui. Это то, что я сделал:

(Это на 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». Если это там, он использует только это поле. Если это не там, это работает как обычно.

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

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