Javascript 在自动完成中显示两个不同的值

我试图设置一个自动完成，在下拉列表中显示2个值。确切地说，我有一个带有名称和ID的用户数据库，我希望通过键入用户的名称来搜索用户，然后在所有具有此名称的用户之间进行选择。 示例：我有两个名为Jack的用户，ID分别为1和2 我希望能够通过在下拉列表中选择我想要的插孔

这是我的实际代码： HTML

NOMPUBLICITAIRE和ENTITYID是我想在列表中显示的用户数据库中变量的名称。 $.mapag_pandaone_网络服务'ag_publicitaire_get_list'，$'ag_nom_pub'.val 返回包含用户ID和名称的对象数组

我的实际代码是从

目前，当我在输入字段中键入3个字母时，出现了以下错误：

我一直在互联网上寻找这个错误，但我真的不知道是什么原因造成的，我也不知道我能做些什么来修复它

如果有人能以任何方式帮助我，我将不胜感激： 如果您需要我的代码中的更多信息或试图修复这该死的东西，请不要犹豫，告诉我

提前感谢，祝你度过愉快的一天

尝试覆盖autocomplete的_renderItem函数，如下所示：

对于1.10之前的jQuery UI：

对于1.10之后的jQuery UI：

在jQueryUI1.10之前，数据标记是自动完成的，而从1.10开始，它是UI自动完成的。这同样适用于item.autocomplete，它将成为ui自动完成项

奖励链接：

---

这是我在原始问题中输入的代码与JSFIDLE的链接：这是我第一次使用JSFIDLE，所以如果我忘记了什么，请告诉我：@darzang你尝试过_renderItem方法了吗？我用你告诉我的内容替换了我最初在问题中输入的所有JS，现在我得到了这个错误：！。我用一个工作更新了我的答案，你可以使用它在JSFIDLE和我的代码上很好地帮助工作！我唯一需要做的就是设置我的函数，向我发送一个数组，就像你手动声明命名标记的数组一样，我想我最好创建一个新问题，对吗？无论如何，感谢您的时间和回答：

<div class="col-sm-3 col-md-3">
    <form>
        Nom: <input type="text" id="ag_nom_pub" value="Oih">                <!-- this is the field used for the autocomplete -->
    </form>
</div>`

    $('#ag_nom_pub').autocomplete({
    // This shows the min length of charcters that must be typed before the autocomplete looks for a match.
    minLength: 3,source: function (request, response) {
       response($.map(ag_pandaone_webservice('ag_publicitaire_get_list',$('#ag_nom_pub').val(), function (value, key) {
            return {
                label: value.NOMPUBLICITAIRE,
                value: value.ENTITYID
            }
        })));    
},    
    focus: function(event, ui) {
        $('#ag_nom_pub').val(ui.item.NOMPUBLICITAIRE);
        return false;
    },
    // Once a value in the drop down list is selected, do the following:
    select: function(event, ui) {
        // place the person.given_name value into the textfield called 'select_origin'...
        $('#ag_nom_pub').val(ui.item.NOMPUBLICITAIRE);
        // and place the person.id into the hidden textfield called 'link_origin_id'. 
        $('#idPub').val(ui.item.ENTITYID);
            return false;
    }
});

$('#ag_nom_pub').autocomplete({
    // Your options goes there
}).data("autocomplete")._renderItem = function (ul, item) {
    // Here you are returning the element wich will be rendered

    return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.ENTITYID + " - " + item.NOMPUBLICITAIRE + "</a>")
        .appendTo(ul);
};

$('#ag_nom_pub').autocomplete({
    // Your options goes there
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    // Here you are returning the element wich will be rendered

    return $("<li></li>")
        .data("ui-autocomplete-item", item)
        .append("<a>" + item.ENTITYID + " - " + item.NOMPUBLICITAIRE + "</a>")
        .appendTo(ul);
};