Використання HTML в автозаповненні інтерфейсу jQuery

До 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")

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

Фокус у наступному:

1. Використовуйте це розширення інтерфейсу jQuery
2. Потім в опції автозаповнення пройти autocomplete({ html:true});
3. Тепер ви можете пройти html <div>sample</div> у поле "label" виводу JSON для автозаповнення.

Якщо ви не знаєте, як додати плагін до інтерфейсу JQuery:

1. Збережіть плагін (розширення HTML Скотта Гонсалеса) у файлі js або завантажте файл js.
2. Ви вже додали сценарій автозаповнення jquery-ui на свою сторінку html (або файл js jquery-ui). Додайте цей сценарій плагіна після цього файла автозаповнення javascript.

Це рішення не рекомендується, але ви можете просто відредагувати вихідний файл 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". Якщо воно є, воно використовує лише це поле. Якщо його немає, це працює як зазвичай.

Потім ви використовуєте автозаповнення точно так само, як раніше, за винятком того, що можете додати ключ "searchchonly" до свого об'єкта JSON.

Сподіваюся, це комусь допомагає!