Question

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

我设法使用一个简单的名称数组，但是我需要能够将id存储在与所选搜索词对应的隐藏输入字段中。

现在我很困惑，作为一名php开发人员，我没有真正的javascript经验，除了简单的ajax调用和简单的jQuery效果。

所以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不执行关联数组并使用＆＃39;对象＆＃39;代替。

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

此时我的console.log（availableTags）就是这样读的。

enter image description here

现在有了这个捕获的信息，我想做自动完成功能，当用户点击他们想要的项目时我想填充文本框以及用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？

Answer 1

如果您可以尝试添加jQuery的Select2插件，它可以为您完成这些操作，那么您无需担心这些问题。只需从PHP创建println((line-"path ").split("/"))和<select></select>标记，<option></option>的值包含元素的ID，然后执行如下函数：

<option>

摘录如下：

<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();

$(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");

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

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

使用对象和自动完成

2 个答案: