使用JSON的jQuery UI自动完成

Question

好吧,我的脑子一直绞尽脑汁(这很糟糕)但是我已经尝试过尽我所能,但仍然无法让它发挥作用.

尝试用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
});

拜托,谢谢!

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