Jquery UI自动完成(自定义列表)不起作用

时间:2015-02-02 06:08:08

标签: javascript jquery ajax jquery-ui-autocomplete

我正在尝试使用jquery UI自动完成功能,但不管怎么说,尽管没有javascript错误,它仍会显示出来。

这是我的json数据:

{"d":"[{\"label\":\"XYZ\",\"desc\":\"desc 1\",\"value\":\"XYZ\",\"ID\":595,\"icon\":\"UM-892983\"},{\"label\":\"ABC .\",\"desc\":\"desc 2\",\"value\":\"ABC .\",\"ID\":1681,\"icon\":\"UM-432944\"}]"}

这是我用于处理自动完成的JS函数:

$().ready(function(){
    $("#txtName").bind("keyup", function (e) {
          // Ajax call returns the above json data

          // On Ajax Success I call
          onSucName(returnData.d);
    });
});

function onSucName(result) {
var varArrAdms = $.parseJSON(result);
$("#txtName").autocomplete({
    source : varArrAdms,
    select : function (event, ui) {
        setNameValue(ui.item.icon)
        $("#txtNo").val(ui.item.icon)
        $("#btnSearch").click();
    },
    open : function () {
        $(this).addClass('loadingTxtBox');
    },
    close : function () {
        $(this).removeClass('loadingTxtBox');
    }
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.value + " <b> desc:" + item.desc + "</b> <i> No:" + item.icon + "</i></a>").appendTo(ul);
};
}

我哪里错了?

2 个答案:

答案 0 :(得分:0)

试试这个例子

 $('#txtName').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: 'url',
                    data: {}, //pass data here
                    dataType: 'json',
                    type: 'post',
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.icon
                            }
                        }));
                    }
                })
            },
            select: function (event, ui) {
                var itemval = ui.item.label;
               // here you can access selected result `itemval`
                return false;
            },
            minLength: 1

        });

答案 1 :(得分:0)

为什么要绑定keyup上的自动完成功能....相反,你应该绑定它一次。 此外,在重新绑定之前,您应该销毁现有实例。

相关问题