jQuery UI - Автозаполнение - Пользовательский стиль? - PullRequest
Новая
       12

jQuery UI - Автозаполнение - Пользовательский стиль?

6 голосов
/ 13 мая 2011

Я использую следующий код, и он работает, возвращает значения и т. Д., Но теги <b> and <br> отображаются в виде текста, а не отображаются.Я бы хотел, чтобы item.id и item.label были на разных строках, если возможно item.id жирным шрифтом: 

 $( "#predictSearch" ).autocomplete({
 source: function( request, response ) {
  $.ajax({
   url: "index.pl",
   dataType: "json",
   data: {
    term: request.term
   },
   success: function( data ) {
    response( $.map( data.items, function( item ) {
     return {
      label: '<B>' + item.id + '</B><br>' + item.label,
      value: item.id
     }
    }));
   }
  });
 },
 minLength: 2
});

Ответы [ 4 ]

8 голосов
/ 13 мая 2011

Похоже, у вас есть дополнительный код (вызов ajax) для автозаполнения, который может не понадобиться.Но вы можете просто поменять специальные символы, которые вставляет jquery, чтобы экранировать html в событии 'auto' автозаполнения. 

$("#autocomplete_field").autocomplete({
source: "autocomplete.php",
minLength: 2,
open: function(event, ui){
       $("ul.ui-autocomplete li a").each(function(){
        var htmlString = $(this).html().replace(/&lt;/g, '<');
        htmlString = htmlString.replace(/&gt;/g, '>');
        $(this).html(htmlString);
        });
     }
});

Полный пример http://www.jensbits.com/2011/03/03/jquery-autocomplete-with-html-in-dropdown-selection-menu/.

И,если вы используете perl в автозаполнении, http://www.jensbits.com/2011/05/09/jquery-ui-autocomplete-widget-with-perl-and-mysql/ является примером для этого.

7 голосов
/ 13 мая 2011

Вместо события Success используйте событие _renderItem.

Реализация в реальном времени на Vroom .Напечатайте аэропорт, вы увидите изображение слева.

ПРИМЕЧАНИЕ: _renderItem ниже имеет некоторые сложные вычисления.Не идите этим, просто используйте идею. 

$("#myInput")
        .autocomplete({
            minLength: 0,
            delay: 10,
            source: function (req, responseFn) {
                //Your ajax call here returning only responseFn Array having item.id and item.id
            },
            select: function (event, ui) {
                //action upon selecting an item
                return false;
            }
        })
    .data("autocomplete")
        ._renderItem = function (ul, item) {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a><span class='airoplane'>" + (item[0] + (item[2] == "" ? "" : ", " + item[2]) + (item[1] == "" ? "" : " (" + item[1] + ")")).replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term).replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<span class='highlight'>$1</span>") + "</span></a>")
                .appendTo(ul);
        };
0 голосов
/ 15 апреля 2013

Судя по ответу iMatoria, я так и сделал.

var jAuto = $('#purchaser-autocomplete input:text');

jAuto.autocomplete({
        source: URL
        minLength: 2,
        select: function (event, ui) {
            //Do Stuff
        }
    });

jAuto.data("autocomplete")._renderItem = function (ul, item) {
    var cssClass = "";
    if (item.id.substring(0,1) === 'S') { cssClass = " class='item-staff'"; }

    return $("<li" + cssClass + "></li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.label + "</a>")
        .appendTo(ul);
}

jAuto.focus();
0 голосов
/ 19 декабря 2012

Мы решили эту проблему, добавив следующий код в конец функции: 

$("ul.ui-autocomplete li a").each(function(){
   var htmlString = $(this).html().replace(/&lt;/g, '<');
   htmlString = htmlString.replace(/&gt;/g, '>');
   $(this).html(htmlString);
});

Здесь функция обратного вызова открытия события не вызывается.

...