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

Question

我正在尝试设置一个自动完成功能，它会在下拉列表中显示 2 个值。准确地说，我有一个包含姓名和 ID 的用户数据库，我想通过键入他的姓名来搜索用户，然后在具有此姓名的所有用户之间进行选择。示例:我有两个名为 Jack 的用户，ID 分别为 1 和 2我希望能够通过查看下拉列表中的 ID 选择我想要的 Jack

这是我的实际代码:HTML

<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>`

JS:

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

NOMPUBLICITAIRE 和 ENTITYID 是我要在列表中显示的用户数据库中的变量名称。$.map(ag_pandaone_webservice('ag_publicitaire_get_list',$('#ag_nom_pub').val()返回包含用户 ID 和名称的对象数组

我的实际代码取自 here

目前，当我在输入字段中键入 3 个字母时出现此错误:

我一直在网上寻找这个错误，但我真的不明白是什么原因导致的，我不知道我能做些什么来修复它。

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

提前致谢，祝您有美好的一天!

Answer 1

尝试像这样覆盖自动完成的 _renderItem 函数:

对于 1.10 之前的 jQuery UI:

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

jsfiddle for versions before 1.10

对于 1.10 之后的 jQuery UI:

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

jsfiddle for versions after 1.10

---

Before jquery UI 1.10, the data tag was autocomplete and since 1.10 it is ui-autocomplete. The same applies for item.autocomplete wich becomes ui-autocomplete-item

Bonus link: jQuery UI 1.10 Upgrade Guide about autocomplete