Автозаполнение Jquery: Как создать меню автозаполнения с моим собственным html или как хранить и извлекать данные, похожие на id, из меню?

Question

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

obj{id:"12121", name:"XXXXXX"} 

Я хочу показать name в меню, а также мне нужно получить id.

Как обернуть его с помощью менюhtml и получить его

Теперь автоматически сгенерированная разметка меню выглядит следующим образом:

<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">XXXXXX</a></li>

Я хочу, чтобы идентификатор моего объекта содержался в атрибуте id элемента <a>, а имя было указано каккак обычно.

Как это,

<li class="ui-menu-item" role="menuitem"><a id='12121' class="ui-corner-all" tabindex="-1">XXXXXX</a></li>

Можем ли мы сделать это с помощью автозаполнения jquery?!

Любые предложения будут благодарны.

Спасибо~!

Answer 1

В настоящее время я использую объект данных JSON (из sourcefile.php), который выглядит следующим образом:

{"label":"Reljac, Jason","value":"Reljac, Jason","id":"620"}

Я тогда использую это:

$("#field").autocomplete({
    minLength: 2,
    source: "http://sourcefile.php",

    select: function(event, ui) {
        $('#po_vendor').val(ui.item.id);
        $("#po_vendorDisplay").val(ui.item.value);
        return false;
    }
})
.data("autocomplete")._renderItem = function( ul, item ) {
    return $( "<li></li>" )
    .data( "item.autocomplete", item )
    .append( "<a>"+ item.label + "</a>" )
    .appendTo( ul );
};

Отображает Reljac, Jason в выпадающем списке, в то время как 620 подхватывается автозаполнением

Answer 2

Мы изменили наш автозаполнение, чтобы использовать флажки как часть раскрывающегося списка, но, чтобы исправить вашу ситуацию, я думаю, вы хотели бы что-то вроде этого:

$( '#autocompleter' ).autocomplete({
    source: "yourautocompleter.php",
    minLength: 2,
    select: function( event, ui ) {
            //your select event here
    }

}).data( 'autocomplete' )._renderItem = function( ul, item ) {
    return $( '<li class="ui-menu-item"></li>' )
        .data( 'item.autocomplete', item )
        .append( '<a class="ui-corner-all" id="' + item.id + '">' + item.label + "</a>" )
        .appendTo( ul );
};

Редактировать: Удалено много несущественныхкод.