在jQuery UI自动完成中使用HTML

Question 1

在jQuery UI 1.8.4之前，我可以在为使用自动完成功能而构建的JSON数组中使用HTML。

我能够做类似的事情：

$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"}]

Question 2

将此添加到您的代码：

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

Question 3

jquery-ui自动完成文档中也对此进行了记录：http : //api.jqueryui.com/autocomplete/#option-source

诀窍是：

使用此jQuery UI扩展
然后在自动完成选项中通过 autocomplete({ html:true});
现在，您可以<div>sample</div>在JSON输出的“ label”字段中传递html以实现自动完成功能。

如果您不知道如何将插件添加到JQuery UI，请执行以下操作：

将插件（ScottGonzález的html扩展名）保存在js文件中或下载js文件。
您已经在HTML页面（或jquery-ui js文件）中添加了jquery-ui自动完成脚本。在该自动完成的javascript文件之后添加此插件脚本。

Question 4

不建议使用此解决方案，但您可以编辑源文件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)},

Question 5

我有同样的问题，但是我更喜欢为我的option（'source'）使用静态的选项数组。如果您尝试使用此解决方案，则会发现jQuery也在整个标签上进行搜索。

EG（如果您提供）：

[{"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，允许您搜索标签，值或ID。

您可以根据需要为自动完成功能的源参数提供尽可能多的键/值。

PS：原始参数为c.label||c.value||c。

Question 6

我遇到了克拉伦斯提到的问题。我需要提供HTML才能使样式和图像看起来很漂亮。这导致键入匹配所有元素的“ div”。

但是，我的值只是一个ID号，因此我不能仅凭此进行搜索。我需要搜索以查找多个值，而不仅仅是ID号。

我的解决方案是添加一个仅包含搜索值的新字段，并在jQuery UI文件中检查该字段。这是我所做的：

（这在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”字段的检查。如果存在，则仅使用该字段。如果不存在，它将正常运行。

然后，您可以像以前一样使用自动完成功能，只是可以将“ searchonly”键添加到JSON对象中。

希望对您有所帮助！