在jQuery UI自动完成中使用HTML

Before jQuery UI 1.8.4 I could use HTML in the JSON array I built to work with an autocomplete.

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

I was able to do something like:

我可以做一些类似的事情:

$row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>';

That would show up as red text in the drop down.

这将在下拉菜单中显示为红色的文本。

As of 1.8.4 that does not work. I found http://dev.jqueryui.com/ticket/5275 which tells me to use the custom HTML example here which I have had no luck with.

从1.8.4开始，这是行不通的。我找到了http://dev.jqueryui.com/ticket/5275，它告诉我在这里使用自定义的HTML示例，这是我不太幸运的。

How can I go about getting HTML to show up in the suggestion?

我怎样才能让HTML在建议中出现呢?

My jQuery is:

我的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>

My JSON array includes HTML like the following:

我的JSON数组包含如下HTML:

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

5 个解决方案

#1

113

Add this to your code:

将此添加到代码中:

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

So your code becomes:

所以你的代码是:

<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>

Note: On old versions of jQueryUI use .data("autocomplete")" instead of .data("ui-autocomplete")

注意:在jQueryUI的旧版本中，使用.data(“autocomplete”)而不是.data(“ui-autocomplete”)

#2

This is also documented in jquery-ui autocomplete documentation at: http://api.jqueryui.com/autocomplete/#option-source

这在jquery-ui自动完成文档中也有记载:http://api.jqueryui.com/autocomplete/#option-source

The trick is:

关键是:

Use this jQuery UI extension
使用这个jQuery UI扩展
Then in autocomplete option pass autocomplete({ html:true});
然后在自动完成选项中通过自动完成({html:true});
Now you can pass html <div>sample</div> in "label" field of JSON output for autocomplete.
现在您可以通过html和lt;在“标签”字段中的JSON输出用于自动完成。

If you don't know how to add the plugin to JQuery UI then:

如果您不知道如何向JQuery UI添加插件，那么:

Save the plugin(Scott González' html extension) in a js file or download the js file.
将插件(Scott Gonzalez的html扩展名)保存到一个js文件中，或者下载js文件。
You have already added the jquery-ui autocomplete script in your html page(or the jquery-ui js file). Add this plugin script after that autocomplete javascript file.
您已经在html页面中添加了jquery-ui autocomplete脚本(或者jquery-ui js文件)。在自动完成的javascript文件之后添加这个插件脚本。

#3

This solution is not recommended but you can just edit source file jquery.ui.autocomplete.js (v1.10.4)

不推荐使用此解决方案，但您可以编辑源文件jquery.ui.autocomplete。js(v1.10.4)

Original:

原:

_renderItem:function(t,i){return e("<li>").append(e("<a>").text(i.label)).appendTo(t)},

Fixed:

修复:

_renderItem:function(t,i){return e("<li>").append(e("<a>").html(i.label)).appendTo(t)},

#4

I had the same issue, but I prefer to use a static array of options for my option('source') for performance. If you tried that with this solution, you'll find that jQuery searches on the entire label too.

我也有同样的问题，但是我更喜欢为我的选项(“source”)使用一个静态的选项数组来实现性能。如果您尝试使用这个解决方案，您会发现jQuery也会在整个标签上搜索。

EG if you supplied:

例如如果你提供:

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

Then typing "span" would match both results, to get it to search on the value only override the $.ui.autocomplete.filter function:

然后输入“span”将匹配两个结果，使其搜索值只覆盖$.ui.autocomplete。过滤功能:

$.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)})}

You can edit the last parameter c.value to anything you want, e.g. c.id || c.label || c.value would allow you to search on label, value, or the id.

您可以编辑最后一个参数c。对任何你想要的东西都有价值，例如c。id | | c。标签| | c。值将允许您搜索标签、值或id。

You can supply as many key/values to autocomplete's source parameter as you want.

您可以为autocomplete的源参数提供任意数量的键/值。

PS: the original parameter is c.label||c.value||c.

原来的参数是c.标签||，||c。

#5

I had the issue mentioned by Clarence. I needed to supply HTML to make a nice appearance with styles and images. This resulted in typing "div" matching all elements.

克拉伦斯提到了这个问题。我需要提供HTML，使其具有漂亮的外观与样式和图像。这导致输入“div”以匹配所有元素。

However, my value was only an ID number, so I couldn't allow the search to run off of just that. I needed the search to look for several values, not just the ID number.

但是，我的值只是一个ID号，所以我不能让搜索就这么跑掉。我需要搜索几个值，而不仅仅是ID号。

My solution was to add a new field that held only the search values and check for that in the jQuery UI file. This is what I did:

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

(This is on jQuery UI 1.9.2; it may be the same on others.)

(这是jQuery UI 1.9.2;其他人可能也是如此。

Edit filter function on line 6008:

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

I added the check for the "value.searchonly" field. If it is there, it uses that field only. If it is not there, it works as normal.

我为“值”添加了支票。searchonly”字段。如果它在那里，它只使用那个字段。如果它不在那里，它正常工作。

Then you use the autocomplete exactly as before, except you can add the "searchonly" key to your JSON object.

然后像以前一样使用autocomplete，除了可以向JSON对象添加“searchonly”键。

I hope that helps someone!

我希望这能帮助某人!

#1

113