Jquery 自动完成 : How to create the autocomplete menu with my own html or how to store and retrieve the `id` like data from the menu?

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>

我想在 <a> 中获取我的对象的 id元素的 id 属性和名称照常。

像这样，

<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