0

I am using jquery UI autocomple with json data source but it's not working but when I used same with fixed data it works. Below is my code.

$(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 Answer 1

1

Based on jQueryUI's API, the source option can either be an array or a String that points to an URL or a Function. Furthermore, your code needs to change few things so that the array is handled in appropriate fashion:

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

Finally, if those changes related to the array aren't enough to make it work, then I would check the JSON load part. I have added some alert calls that can be uncommented for JSON testing purposes. As I am not familiar with the details of the JSON load functionality that is used in the sample code, then I'm just going to mention that there are alternative ways of loading JSON data such as jQuery's getJSON method.

2
  • 1
    Thanks it works, my bad I tried but somehow not able to handle array thing.
    – Sherry
    Dec 16, 2014 at 14:09
  • @user2689563 Excellent :-)
    – jyrkim
    Dec 16, 2014 at 14:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.