jQuery UI使用JSON自动完成

小编典典

jQuery UI使用JSON自动完成

json

好吧，我一直在为此绞尽脑汁（这太糟糕了），但是我一直尝试阅读我所能而且仍然无法使它起作用的内容。

试图用jQuery UI做自动完成

我的json看起来像这样

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

我正在尝试将此信息用作自动完成的来源。我得到的响应对象很好，我很难以正确的格式获得它，因此我可以将“

”放在与“值”相关联的隐藏字段中，该字段需要显示为“值”的一部分落下。

尝试了一百万种不同的方法，但最近的尝试却在下面

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

请多谢！

阅读 359

2020-07-27

共1个答案

小编典典

您需要将要返回的对象转换为jQueryUI期望的格式的数组。

您可以$.map用来将dealers对象转换为该数组。

$('#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
});

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

另外，如果您有权访问生成JSON的服务器端代码，则可以更改返回数据的方式。只要数据：

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

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

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

或这个：

["dealer 5", "dealer 6"]

然后，您的JavaScript变得更加简单：

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

2020-07-27