Использование 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-пример here, с которым мне не повезло.

Как я могу получить 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> 

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

Answer 2

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

EG, если вы указали:

[{"label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"}] 

Затем, набрав «пядь» будет соответствовать оба результата, чтобы заставить его искать по значению только переопределить $.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.

Answer 3

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

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

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

(Это пользовательский интерфейс jQuery 1.9.2; это может быть то же самое на других)

Edit функция фильтра на линии 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.

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

Answer 4

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

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

1. Use this jQuery UI extension
2. Затем в автозаполнения вариант прохода autocomplete({ html:true});
3. Теперь вы можете передать HTML <div>sample</div> в поле «label» вывода JSON для автозаполнения.

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

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

Answer 5

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