Jquery ui autocomplete让我疯狂

时间:2011-06-21 18:42:36

标签: jquery json jquery-ui autocomplete

我有<input id="txtCustome2r" />

我的.ready功能

$("#txtCustome2r").autocomplete({
    source:  "itemcomplete.asp", 
    minLength: 2,
    select: function( event, ui ) {
        log( ui.item ?
                     "Selected: " + ui.item.value + " aka " + ui.item.id :
                     "Nothing selected, input was " + this.value );
    }
}); 

自动完成返回有效的json

[ { "id': "4",  "label": "Kathi  ",   "value": "Kathi  "}, { "id': "6",  "label": "Kathleen  ",   "value": "Kathleen  "}]

并且下拉列表中没有显示任何内容。非常感谢任何帮助!

谢谢!

3 个答案:

答案 0 :(得分:6)

单引号无效JSON。您需要用双引号括起您的键名和字符串值:

[ { "id": 4,  "label": "Kathi", "value": "Kathi 3" }, ... ]

如果您想检查JSON响应的有效性,可以使用JSONLint

答案 1 :(得分:1)

如果您在验证@Mark Bell解决方案中提到的格式后仍然遇到问题,请尝试将dataType: 'json'传递给自动完成功能调用。

答案 2 :(得分:1)

这可能有点棘手。我喜欢使源是一个函数,所以我可以有更多的控制。注意toString上的覆盖:

var search = function (request, response) {
    jQuery.get(
        jQuery('#SearchUrl').val(),
        { searchString: request.term },
        function (data) {
            response(jQuery.map(data.searchResults, function (item) {
                return {
                    label: item.Id,
                    value: {
                        toString: function () { return item.Id + ' - ' + item.Name; },
                        Name: item.Name
                    }
                }
            }));
        }
    );
};
// set up the autocomplete
jQuery('#MyTextBox').autocomplete({
    source: search,
    minLength: 3,
    focus: function (event, ui) {
        jQuery('#name').text(ui.item.value.Name);
    }
});