Javascript 使用对象和自动完成

基本上，我想使用jQuery的自动完成功能实现一个自动完成文本框

我已经通过一个简单的名称数组实现了这一点，但是我需要能够在一个隐藏的输入字段中存储一个id，该字段对应于所选的搜索词

现在我非常困惑，作为一名php开发人员，除了简单的ajax调用和简单的jQuery效果之外，我没有使用javascript的实际经验

因此，onkeyup此函数将运行：

function searchProviders(str) {

            var availableTags = [];

            if (str.length >= 4) {
                var term = str;
                jQuery.ajax({
                    url: "/services/search/",
                    dataType: "jsonp",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 50,
                        term: term
                    },
                    success: function (data) {
                        jQuery.each(data.results, function (key, data) {
                            //console.log(data.name);
                            var obj = {
                                serviceID: data.ID,
                                name: data.name
                            };
                            availableTags.push(obj);
                        })
                        test(availableTags);
                    }
                });
            }

        }

所以，当我使用console.log（data.name）时，我会得到一个简单的名称列表。当传递到我的其他函数时，它工作良好。然而，当我尝试通过i发送时，我意识到javascript不做关联数组，而是使用“objects”

因此，我创建了一个带有服务id和名称的obj，然后将其放入availableTags数组中

此时，当我使用console.log（availableTags）时，它的内容如下所示

现在有了这些信息，我想做自动完成功能，当用户点击他们想要的项目时，我想让它填充文本框，并用id填充另一个隐藏字段

test（）：

---

好了，现在我的自动完成功能又开始工作了，它在下拉列表中显示了要选择的名称，这是因为我只在searchTags中添加了名称，但是我如何才能做到这一点，这样当他们点击一个名称时，它也会将相应的id存储在其他地方呢？

如果你可以尝试添加jQuery的Select2插件，它会为你做这些事情，那你就不用担心这些了。只需从PHP创建一个

和

标记，其中

的值具有元素的ID，并执行如下函数：

<select name="item" id="item">
    <option value="item-1">Item 1</option>
    <option value="item-2">Item 2</option>
    <option value="item-3">Item 3</option>
    <option value="item-4">Item 4</option>
    <option value="item-5">Item 5</option>
</select>

$("#item").select2();

@导入url（“https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css");

项目1
项目2
项目3
项目4
项目5

这解决了我的问题，花了很长时间，但终于实现了
 我不希望有一个select元素，因为我正在用于autocomplete@MatthewSmart看到它已经生成了一个文本输入只！但当选择EDI不理解时，它没有创建另一个id为的输入字段。这是非常可扩展的。让我在@MatthewSmart更新答案。我现在已经完成了我需要做的事情，请参阅我的答案将密钥和标签重命名为：
label（name）
和
value（key）
。检查小提琴：@GuyT这将是完美的，只要它可以保持标签在那里，但存储在一个隐藏的字段中的值
<select name="item" id="item">
    <option value="item-1">Item 1</option>
    <option value="item-2">Item 2</option>
    <option value="item-3">Item 3</option>
    <option value="item-4">Item 4</option>
    <option value="item-5">Item 5</option>
</select>

$("#item").select2();

var searches = new Array();
        var NoResultsLabel = "No Results";
        jQuery(function () {
            /* Auto complete desktop */
            jQuery("#search").autocomplete({
                source: function (request, response) {
                    if (request.term in searches) {
                        response(jQuery.map(searches[request.term].results, function (item) {
                            return {label: item.name, value: item.name, id: item.ID}
                        }));
                    }
                    else {
                        jQuery.ajax({
                            url: "/services/search/",
                            dataType: "jsonp",
                            data: {
                                featureClass: "P",
                                style: "full",
                                maxRows: 50,
                                term: request.term
                            },
                            success: function (data) {

                                searches[request.term] = data;
                                console.log(data);
                                //Return no results msg to give add location
                                if (!data.results.length) {
                                    data.results = [NoResultsLabel];
                                }
                                response(jQuery.map(data.results, function (item) {
                                    return {label: item.name, value: item.name, id: item.ID}
                                }));
                            }
                        });
                    }
                },
                delay: 500,
                minLength: 2,
                autoFocus: true,
                select: function (event, ui) {
                    jQuery('#serviceID').attr('value',ui.item.id);
                    console.log('in the select:');
                    console.log(ui.item);
                }
            }).bind('focus', function () {
                jQuery(this).autocomplete("search");
            });
        });