使用jQuery回调自动完成（标签/值对）

我试图实现自动完成jQuery，但不理解jQueryUI提供的功能

它使用回调函数并以标签/值对的形式获取响应。我有一些示例代码，试图将任意标签/值对传递回来并显示该选项，但它不起作用。如果有人能帮我，或者给我看一个简单的程序，那就太好了

HTML:

​

---

谢谢

您应该在源代码中返回一个数组，即使在本例中只有1个匹配项“hi”/“bye”

如jqueryui.com上的示例所示

response( $.map( data.geonames, function( item ) {
    return {
        label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
        value: item.name
    }
}));

它使用远程响应上的映射返回标签/值的键/值对数组

如果您的源只是一个国家列表，那么您可以使用字符串数组作为源

var countries = ["USA", "Canada", "Mexico", ...]

$('input').autocomplete({
    source : countries
});

如果您使用的是远程源：

$('input').autocomplete({
    source : function (request, response) {
        $.ajax({
            url: "url_to_get_countries",
            dataType: "json",
            success: function( data ) {
            response( $.map( data.countries, function( item ) {
            return {
                label: item.country_name,
                value: item.country_id
            }
            }));
            }
        });
    }
});

---

@LakshmikanthanVijayaraghavan

正如您在中看到的，有三种方法可以使用jquery插件实现自动完成

• 为数组提供值列表
• 提供具有成对值/标签的对象数组
• 提供url以获取对象数组

前两个选项用于固定的值列表。如果您想以友好的方式填充自动完成列表，则必须实现最后一个

为此，必须指定一个url来获取对象数组。如果希望隐藏标签和键，则需要创建一个隐藏的输入类型并设置其值

比如说

$( "#book" ).autocomplete({
           source: "getValues.htm",                     
           select: function(event, ui) {  
                $( "#book" ).val(ui.item.label);  
                $( "#book_hidden" ).val(ui.item.value);
                return false;  
            }                           
        });

getValues.html必须返回标签/值对的数组

---

希望这有助于发送响应时，传递数组而不是函数

$(function() {
    $("#book").autocomplete({        
        source: function(request, response) {
            var data = [{
                    label: "hi",
                    value: "bye"
                    }];
            response(data);
        },
        select: function( event, ui ) {
            $( "#book" ).val( ui.item.label); //ui.item is your object from the array
            return false;
        }
    });
});​

---

Ajax、键值对、触发搜索的最小长度。简单代码

<script>
    $(function () {
        $("#CompanySearch").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/Admin/GetCompanyAutoComplete',
                    dataType: "json",
                    data: { term: request.term },
                    success: function (data) {
                        response(data);
                    }
                });
            },
            minLength: 2
        });
    });
</script>

$（函数（）{
$（“#公司搜索”）。自动完成({
来源：功能（请求、响应）{
$.ajax({
url:“/Admin/GetCompanyAutoComplete”，
数据类型：“json”，
数据：{term:request.term}，
成功：功能（数据）{
答复（数据）；
}
});
},
最小长度：2
});
});

更多

@edatadan 你的回答是最好的解决方案。但是，我认为我们需要保留原始请求，因此您应该修改为：

<script>
    $(function () {
        $("#CompanySearch").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/Admin/GetCompanyAutoComplete?term=' + request.term,
                    dataType: "json",
                    success: function (data) {
                        response(data);
                    }
                });
            },
            minLength: 2
        });
    });
</script>

$（函数（）{
$（“#公司搜索”）。自动完成({
来源：功能（请求、响应）{
$.ajax({
url:'/Admin/GetCompanyAutoComplete？term='+request.term，
数据类型：“json”，
成功：功能（数据）{
答复（数据）；
}
});
},
最小长度：2
});
});

请输入您的国家名称$（“#book”）.autocomplete（{source:function（request，response）{alert（request.term）；response（function（）{return{label:“hi”，value:“bye”}}）；alert（response）；}）；我从评论中添加了您的代码。你可以编辑你的帖子来添加任何相关的代码，而不是在评论中添加代码：）嗨，弗朗索瓦，谢谢你，我无法缩进代码谁曾经编辑过代码，请保留它以及提琴，以防提琴链接过时，所以这个问题对她将来有用。谢谢Fooz先生把它添加回来。哦，我很抱歉。Hi Mark，你能给我一些代码吗？就像我说的，我不是真的从j query网站上的描述中了解到自动完成的工作方式。另外，请告诉我是否会自动生成包含建议的div？@LakshmikanthanVijayaraghavan您正在使用远程数据源吗？你是从哪里获得自动完成列表的，我可以向你展示一个你正在使用的任何数据源的示例。嗨，马克，我要为国家/地区执行自动删除，我想数据库不能从这里访问。实际上，我正在尝试使用标签值pairIt获取国家名称和相应的id，如果它是一个字符串数组，那么pairIt就可以工作@LakshmikanthanVijayaraghavan更新了我的答案，展示了一个使用字符串数组的示例。是的，我得到了这部分，但是我需要使用ajax调用从数据库中获取它，并且我需要有一个与我的国家名称关联的id，这就是为什么我尝试使用标签-值对和回调函数Hi-Prashanth代码可以工作，但什么是响应（数据）“response”是以数据为参数调用的回调函数。response（）需要一个数组作为参数。这个数组可以是一个简单的数组（比如['a'，'b']），也可以是一个对象数组，每个对象都有'label'和'value'属性（比如[{label:'VA'，value:'Virginia'}，{label:'CA'，value:'California'}]），Hi Prashanth会在我的文本框旁边显示一个下拉列表，在这种情况下会显示“Hi是的。看看这个。当您开始键入时，它将显示从响应接收到的数据数组中的元素。嗨，Prashanth，谢谢您，它成功了！！！你还可以告诉我一件事，如果我能让值显示在下拉列表中而不是标签中，因为现在它会显示标签并设置值。在这两种情况下，我只想显示其中一种。（即在下拉列表和文本框中）谢谢你好Tux我可以用这个例子做选择吗jsfiddle.net/kB25J/3.Hi，我已经在更新了你的代码。如您所见，我在autocomplete元素之外定义了数据数组。我认为（但不确定）如果您将数据数组定义为自动完成“源”选项，那么每次您都将返回整个数组。我还包含了一个用于存储de值的输入，当您选择一个元素时，它将被填充。请记住，始终选择标签，而不是值。如果要选择

<script>
    $(function () {
        $("#CompanySearch").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/Admin/GetCompanyAutoComplete',
                    dataType: "json",
                    data: { term: request.term },
                    success: function (data) {
                        response(data);
                    }
                });
            },
            minLength: 2
        });
    });
</script>

<script>
    $(function () {
        $("#CompanySearch").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/Admin/GetCompanyAutoComplete?term=' + request.term,
                    dataType: "json",
                    success: function (data) {
                        response(data);
                    }
                });
            },
            minLength: 2
        });
    });
</script>