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

до 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"}]
674   5  

5 ответов:

добавьте это в ваш код:

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

113  
2014-01-15 15:11:26

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

хитрость заключается в:

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

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

  1. сохраните плагин (расширение html Scott González) в файле js или загрузите файл js.
  2. вы уже добавили скрипт автозаполнения jquery-ui на свою html-страницу (или JS-файл jquery-ui). Добавьте этот скрипт плагина после этого файла автозаполнения javascript.
8  
2013-11-04 11:54:12

это решение не рекомендуется, но вы можете просто отредактировать исходный файл jquery.пользовательский интерфейс.функция автозаполнения.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)},
1  
2014-07-02 13:20:23

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

0  
2011-11-24 02:59:05

У меня был вопрос, упомянутый Кларенсом. Мне нужно было поставить 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);
        });
    }

Я добавил чек для "значение.поле searchonly". Если он есть, он использует только это поле. Если его там нет, он работает нормально.

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

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

0  
2013-02-21 00:54:32

Comments

    Ничего не найдено.
Click here to cancel reply.