使用对象和自动完成答案

【问题标题】：Working with objects and autocomplete使用对象和自动完成
【发布时间】：2015-09-23 19:20:42
【问题描述】：

基本上，我想用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 不执行关联数组，而是使用“对象”。

因此，我创建了一个带有服务 ID 和名称的 obj，然后将其推送到我的 availableTags 数组中。

此时我的 console.log(availableTags) 是这样的。

现在，通过捕获此信息，我想执行自动完成功能，当用户单击他们想要的项目时，我希望它填充文本框以及使用 id 填充另一个隐藏字段。

测试（）：

        function test(test){
            var availableTags = [test];
            var Tags = availableTags[0];
            var searchTags = []
            jQuery.each(Tags, function(key,obj){
                jQuery.each(obj, function(key,value){
                    searchTags.push(value);
                });
            });
            jQuery( "#search" ).autocomplete({
                source: searchTags
            });
        }

好的，现在我的自动完成功能再次起作用，它在下拉列表中显示名称以供选择，这是因为我只将名称添加到 searchTags 中，但是如果他们点击一个名称，我该怎么做也在别处存储对应的id？

【问题讨论】：

将密钥和标签重命名为：label(name) 和 value(key)。查看小提琴：jsfiddle.net/yu93jux4
@GuyT 那将是完美的，只要它可以将标签保留在那里但将值存储在隐藏字段中

标签： javascript jquery ajax autocomplete jquery-autocomplete

【解决方案1】：

如果您可以尝试添加 jQuery 的 Select2 插件，它会为您完成这些工作，那么您无需担心这些。只需从 PHP 中创建 <select></select> 和 <option></option> 标签，<option> 的值具有元素的 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();

一个sn-p可以如下：

$(function () {
  $("#item").select2({
    tags: true,
    width: 200
  }).change(function () {
    $("#sel").html("Selected Values: " + $(this).val());
  });
});

@import url("https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css");

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
<select name="item" id="item" multiple>
  <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>
<div id="sel"></div>

【讨论】：

我不希望有一个选择元素，因为我正在使用进行自动完成
@MatthewSmart 看到它只生成了一个文本输入！
但它没有在选择时创建另一个带有id的输入字段
我不明白。这是非常可扩展的。让我更新答案@MatthewSmart。
我已经完成了我现在需要做的事情，看我的回答

【解决方案2】：

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");
            });
        });

这解决了我的问题，花了很长时间才到那里！

【讨论】：