首页 文章

在jQuery UI自动完成中使用HTML

提问于
浏览 次
80

之前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示例here .

如何让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"}]
html jquery-ui autocomplete jquery-ui-autocomplete

5 回答

  • 115

    将其添加到您的代码中：

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

    Note: 在旧版本的jQueryUI上使用 .data("autocomplete")" 而不是 .data("ui-autocomplete")

    回复于
  • 1

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

    诀窍是：

    • Use this jQuery UI extension

    • 然后在自动完成选项中传递 autocomplete({ html:true});

    • 现在，您可以在JSON输出的"label"字段中传递html &lt;div&gt;sample&lt;/div&gt; 以进行自动完成 .

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

    • 将插件（ScottGonzález的html扩展名）保存在js文件中或下载js文件 .

    • 您已经在html页面（或jquery-ui js文件）中添加了jquery-ui自动完成脚本 . 在该自动完成javascript文件之后添加此插件脚本 .

    回复于
  • 0

    不推荐使用此解决方案，但您只需编辑源文件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)},
    回复于
  • 0

    我有同样的问题，但我更喜欢为我的选项（'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 .

    回复于
  • 8

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

    我希望能帮助别人！

    回复于

相关问题