Как отформатировать автозаполнение ответа JQueryUI?

Question

Я пытаюсь создать виджет автозаполнения, который будет отображать имя и краткое описание соответствующего элемента.

Например, если я наберу "Америка", будет отображаться "Север Америка - Северный субконтинент Северной и Южной Америки. "и «Юг Америка - Южный субконтинент Северной и Южной Америки».

Я успешно сделал это, поэтому моя база данных вернет соответствующий ответ JSON с id, значением (именем элемента, например,Северная Америка и desc (краткое описание, например, «Северный субконтинент ...»), мне просто нужна помощь, чтобы отформатировать возвращаемые результаты как

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

вместо просто

<li>value</li>

Заранее большое спасибо.

PS Я пытался найти ответ о переполнении стека, но ответы, которые я нашел, включают formatResult и другие методы, которые больше не являютсяподдерживается.

Answer 1

http://jqueryui.com/demos/autocomplete/#custom-data - это пример пользовательских данных на сайте пользовательского интерфейса jquery, чего вы пытаетесь достичь?

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