如何格式化 JQueryUI 自动完成响应？答案

【问题标题】：How to format JQueryUI autocomplete response?如何格式化 JQueryUI 自动完成响应？
【发布时间】：2011-09-03 10:05:42
【问题描述】：

我正在尝试制作一个自动完成小部件，它将显示匹配项目的名称和简短描述。

例如，如果我输入“America”，它将显示“North America - 美洲北部次大陆”。和“南美洲 - 美洲的南部次大陆。”

我已成功完成，因此我的数据库将返回相应的 JSON 响应，其中包含 id、value（项目名称，例如北美和 desc（简短描述，例如“北部次大陆...”），我只需要帮助将返回的结果格式化为

<li><strong>value<strong><br><p>desc</p></li>

而不仅仅是

<li>value</li>

非常感谢。

附：我一直试图在 Stack Overflow 上寻找答案，但我找到的答案涉及 formatResult 和其他不再支持的方法。

【问题讨论】：

标签： jquery jquery-ui autocomplete jquery-autocomplete

【解决方案1】：

http://jqueryui.com/demos/autocomplete/#custom-data - jquery ui 网站上的自定义数据示例是您想要实现的目标吗？

【讨论】：

谢谢。这似乎正是我正在寻找的。如果成功了，我会告诉你的。

【解决方案2】：

这可能会有所帮助，请查看 .data()：

$( "#project" ).autocomplete({
        minLength: 0,
        source: projects,
        focus: function( event, ui ) {
            $( "#project" ).val( ui.item.label );
            return false;
        },
        select: function( event, ui ) {
            $( "#project" ).val( ui.item.label );
            $( "#project-id" ).val( ui.item.value );
            $( "#project-description" ).html( ui.item.desc );
            $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

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

【讨论】：

【解决方案3】：

您应该能够使用以下 RegEx 来实现您正在寻找的结果。

item.label.replace(new RegExp('(' + term + ')', 'ig'), function ($1, match) {
     return '<strong>' + match + '</strong>';
});

完整的例子如下。

$("#project").autocomplete({
            minLength: 0,
            source: projects,
            focus: function( event, ui ) {
                $( "#project" ).val( ui.item.label );
                return false;
            },
            select: function( event, ui ) {
                $( "#project" ).val( ui.item.label );
                $( "#project-id" ).val( ui.item.value );
                $( "#project-description" ).html( ui.item.desc );
                $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

                return false;
            }
        })
        .data( "autocomplete" )._renderItem = function( ul, item ) {
            var term = this.term,
                        formattedLabel = item.label.replace(new RegExp('(' + term + ')', 'ig'), function ($1, match) {
                            return '<strong>' + match + '</strong>';
                        });
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + formattedLabel + "<br>" + item.desc + "</a>" )
                .appendTo( ul );
        };

【讨论】：