使用 JSON 的 jQuery UI 自动完成 [英] jQuery UI autocomplete with JSON

问题描述

好吧，我一直在绞尽脑汁(我对此很糟糕)但是是的，我尝试了所有我可以阅读的内容，但仍然无法让它发挥作用.

Alright been racking my brain on this (im terrible at this) but yea ive tried reading all i can and still cant get it to work.

尝试使用 jquery ui 进行自动完成

trying to do autocomplete with jquery ui

我的 json 看起来像这样

my json looks like this

{"dealers":
     {
         "1156":"dealer 1",
         "1122":"dealer 2",
         "1176":"dealer 3",
         "1491":"dealer 4",
         "1463":"dealer 5",
         "269":"dealer 6"
    }
}

我正在尝试将此信息用作自动完成的来源.我得到的响应对象很好我只是无法以正确的格式获取它，以便我可以将###"放在与值"相关的隐藏字段中，该字段需要显示为下拉.

i am trying to use this information as the source for autocomplete. i am getting the response object just fine I am just having trouble getting it in the right format so that I can place the "###" in a hidden field tied to the "value" which needs to be displayed as the portion of the drop down.

尝试了一百万种不同的方法，但最近的尝试低于

been trying a million different ways but a recent attempt was below

function ajaxCall() {
    $.getJSON("/example/location/example.json?term=" + $('#dealerName').val(),
        function(data) {
        $.each(data.dealers, function(k, v) {                
                alert(k + ' : ' + v);
        });
    });        
}

$('#dealerName').autocomplete({
    source: ajaxCall,
    minLength: 2,
    delay: 100
});

非常感谢！

推荐答案

您需要将您获取的对象转换回 jQueryUI 期望的格式的数组.

You need to transform the object you are getting back into an array in the format that jQueryUI expects.

您可以使用 $.map 来转换 dealers 对象放入该数组中.

You can use $.map to transform the dealers object into that array.

$('#dealerName').autocomplete({
    source: function (request, response) {
        $.getJSON("/example/location/example.json?term=" + request.term, function (data) {
            response($.map(data.dealers, function (value, key) {
                return {
                    label: value,
                    value: key
                };
            }));
        });
    },
    minLength: 2,
    delay: 100
});

请注意，当您选择一个项目时，键"将放置在文本框中.您可以通过调整 $.map 的回调函数返回的 label 和 value 属性来更改此设置.

Note that when you select an item, the "key" will be placed in the text box. You can change this by tweaking the label and value properties that $.map's callback function return.

或者，如果您有权访问生成 JSON 的服务器端代码，则可以更改返回数据的方式.只要数据:

Alternatively, if you have access to the server-side code that is generating the JSON, you could change the way the data is returned. As long as the data:

• 是具有 label 属性、value 属性或两者的对象数组，或
• 是一个简单的字符串数组

• Is an array of objects that have a label property, a value property, or both, or
• Is a simple array of strings

换句话说，如果你可以这样格式化数据:

In other words, if you can format the data like this:

[{ value: "1463", label: "dealer 5"}, { value: "269", label: "dealer 6" }]

或者这个:

["dealer 5", "dealer 6"]

那么你的 JavaScript 就会变得更简单:

Then your JavaScript becomes much simpler:

$('#dealerName').autocomplete({
    source: "/example/location/example.json"
});

这篇关于使用 JSON 的 jQuery UI 自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！