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

Question

I am trying to make an autocomplete widget that will display the name and a short description of the matched item.

For example, if I type "America" it will show "North America - The northern subcontinent of the Americas." and "South America - The southern subcontinent of the Americas."

I have successfully made it so my database will return the appropriate JSON response with id,value (name of the item, eg. North America, and desc (short description eg. 'The northern subcontinent...'), I just need help to format the returned results as

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

instead of just

<li>value</li>

Thanks a lot in advance.

PS I have been trying to look for an answer on Stack Overflow, but the answers I've found involve formatResult and other methods that are no longer supported.

Answer 1

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

Answer 2

this may be of help,look at the .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

You should be able to use the following RegEx to achieve the result you are looking for.

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

The full example is below.

$("#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 );
        };