Question

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

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

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

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

而不仅仅是

<li>value</li>

提前多多感谢。

P.S。我一直试图在Stack Overflow上寻找答案，但我发现的答案涉及formatResult和其他不再支持的方法。

Answer 1

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

Answer 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 );
    };

Answer 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 );
        };

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

3 个答案: