jQuery UI-自动完成-自定义样式？

我正在使用下面的代码，它正在工作，返回值等等，但是

和

标记显示为文本，而不是呈现。我希望

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
});

$（“#预测搜索”）.autocomplete({
来源：功能（请求、响应）{
$.ajax({
url:“index.pl”，
数据类型：“json”，
数据：{
期限：request.term
},
成功：功能（数据）{
响应（$.map（data.items，函数（item））{
返回{
标签：'+item.id+'
'+item.label，
值：item.id
}
}));
}
});
},
最小长度：2
});

使用_renderItem事件代替成功事件

现场实施。键入airport，您将注意到左侧的图像

注意：

\u下面的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，
延误：10，
来源：功能（请求、响应）{
//这里的ajax调用只返回具有item.id和item.id的responseFn数组
},
选择：功能（事件、用户界面）{
//选择项目时的操作
返回false；
}
})
.数据（“自动完成”）
._renderItem=功能（ul，项目）{
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“+（项[0]+（项[2]==”？：“，“+项[2]）+（项[1]==”？：“（“+项[1]+”）））。替换（新的RegExp（（？！[^&；]+）（？！）（？！[^&；]+；），“gi”），“$1”）+”）
.附录（ul）；
};

似乎您有一些额外的代码（ajax调用）用于自动完成，而这些代码可能不需要。但是，您可以只交换jquery输入的特殊字符，以便在自动完成的“open”事件中转义html

$("#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);
        });
     }
});

$（“#自动完成_字段”）.autocomplete({
来源：“autocomplete.php”，
最小长度：2，
打开：功能（事件、用户界面）{
$（“ul.ui-autocomplete li a”）。每个（函数（）{
var htmlString=$（this.html（）.replace（//g'，）；
$（this.html（htmlString）；
});
}
});

完整的例子

---

如果您在autcomplete中使用perl，这就是一个例子。

我们通过在函数末尾添加以下代码来解决此问题：

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

$（“ul.ui-autocomplete li a”）。每个（函数（）{
var htmlString=$（this.html（）.replace（//g'，）；
$（this.html（htmlString）；
});

---

这里没有触发事件打开回调函数。

根据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();

var jAuto=$（“#买方自动完成输入：文本”）；
jAuto.autocomplete({
来源：URL
最小长度：2，
选择：功能（事件、用户界面）{
//做事
}
});
jAuto.data（“自动完成”）。\u renderItem=功能（ul，项目）{
var cssClass=“”；
if（item.id.substring（0,1）=='S'）{cssClass=“class='item-staff'”；}
返回$（“”）
.data（“item.autocomplete”，item）
.append（“+item.label+”）
.附录（ul）；
}
jAuto.focus（）；

你是说HTML标签吗？--etc？

标记被去除，使用

代替，

优于br使用“\r\n”，后者用于新行，但使用双引号而不是单引号lol只是以防万一…@Jatin是的，如果你看标签：行我正在返回id和标签，我希望其中一个在屏幕上另一个的下方，因此，我尝试添加一个
标记，但它没有被呈现。@Val标记并没有被弃用-它的用途只是被重新定义为“一个元素，它代表一段文本，在风格上与普通散文有所不同，而不传达任何额外的重要性。”谢谢Jen，这很有意义。我不确定，但我认为这一定是性能问题。每次在文本框内调用用户函数并开始搜索时，都应调用Open函数。相反，可以使用_renderItem函数。否则，这是一个很好的解决方案；我倾向于打印$query->header（）；，并使用DBI占位符来防止SQL注入。谢谢again@Raoul感谢您提供有关DBI占位符的提示。我更新了我的代码。@iMatoria不会在用户每次开始搜索时触发renderItem。我自己也不确定，我会调查的。