83

在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"}]
4

5 回答 5

122

将此添加到您的代码中：

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

于 2010-08-16T04:34:06.203 回答
11

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

诀窍是：

  1. 使用这个 jQuery UI 扩展
  2. 然后在自动完成选项中通过autocomplete({ html:true});
  3. &lt;div&gt;sample&lt;/div&gt;现在您可以在 JSON 输出的“标签”字段中传递 html以进行自动完成。

如果您不知道如何将插件添加到 JQuery UI，那么：

  1. 将插件（Scott González 的 html 扩展名）保存在 js 文件中或下载 js 文件。
  2. 您已经在 html 页面（或 jquery-ui js 文件）中添加了 jquery-ui 自动完成脚本。在自动完成 javascript 文件之后添加这个插件脚本。
于 2013-07-28T08:48:43.940 回答
2

不建议使用此解决方案，但您可以只编辑源文件 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)},
于 2014-07-02T06:01:21.830 回答
0

我有同样的问题，但我更喜欢为我的 option('source') 使用静态选项数组来提高性能。如果您尝试使用此解决方案，您会发现 jQuery 也会搜索整个标签。

例如，如果您提供：

[{"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.

于 2011-11-21T21:40:34.710 回答
0

我遇到了克拉伦斯提到的问题。我需要提供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 对象。

我希望对某人有所帮助！

于 2013-01-11T20:31:00.040 回答