使用Json数据源的Jquery UI自动完成

时间:2014-12-16 12:34:58

标签: json autocomplete

我正在使用带有json数据源的jquery UI自动完成功能,但它不起作用,但是当我使用与固定数据相同时,它可以工作。以下是我的代码。

$(document).ready(function () {
    var codes = "";
    Admin_BasicFeeSchedule.LoadCPTCodes().done(function (response) {
        if (response.status != false) {
            if (response.CPTCodeCount > 0) {
                var CPTCodeLoadJSONData = JSON.parse(response.CPTCodeLoad_JSON);
                $.each(CPTCodeLoadJSONData, function (i, item) {
                    codes = codes + "'" + item.ShortName + "'";
                });
                //codes = codes + "]";
                alert(codes);
            }
        }
        else {
            utility.DisplayMessages(response.Message, 3);
        }
    });

    $.widget("ui.autocomplete", $.ui.autocomplete, {
        _renderMenu: function (ul, items) {
            var that = this;
            $.each(items, function (index, item) {
                that._renderItemData(ul, item);
            });
            $(ul).wrap("<div></div>");
        },
    });

    $("input#ddlCPTCode").autocomplete({
        source: [codes],//['Tom', 'Alex', 'Patrick'],
    });
});

1 个答案:

答案 0 :(得分:1)

基于jQueryUI的API,source option可以是指向URL或函数的数组或字符串。此外,您的代码需要更改一些内容,以便以适当的方式处理数组:

$(document).ready(function () {
    var codes = []; // array is created
    Admin_BasicFeeSchedule.LoadCPTCodes().done(function (response) {
        //alert("LoadCPTCodes works") ;
        if (response.status != false) {
             //alert("response.status true") ;
            if (response.CPTCodeCount > 0) {
               //alert("CPTCodeCount > 0") ;
                var CPTCodeLoadJSONData = JSON.parse(response.CPTCodeLoad_JSON);
                $.each(CPTCodeLoadJSONData, function (i, item) {
                    codes.push(item.ShortName); //add item to an array
                });
                //codes = codes + "]";
                alert(codes);
            }
        }
        else {
            utility.DisplayMessages(response.Message, 3);
        }
    });

    $.widget("ui.autocomplete", $.ui.autocomplete, {
        _renderMenu: function (ul, items) {
            var that = this;
            $.each(items, function (index, item) {
                that._renderItemData(ul, item);
            });
            $(ul).wrap("<div></div>");
        },
    });

    $("input#ddlCPTCode").autocomplete({
        source: codes // pass an array (without a comma)
    });
});

最后,如果那些与数组相关的更改不足以使其工作,那么我会检查JSON加载部分。我添加了一些警报调用,可以在JSON测试目的时取消注释。由于我不熟悉示例代码中使用的JSON加载功能的详细信息,因此我要提到有其他方法可以加载JSON数据,例如jQuery's getJSON方法。 / p>