Question

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

这是我的实际代码： 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

在jquery UI 1.10之前，数据标记为autocomplete，自1.10开始为ui-autocomplete。 item.autocomplete成为ui-autocomplete-item
同样适用
加分链接：jQuery UI 1.10 Upgrade Guide about autocomplete

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

1 个答案: