CODEWITHSUNDEEP
javascriptjqueryhtmljquery-autocomplete
flofreelance
flofreelance

Reputation: 944

Autocomplete a Drop down List with id and value

I want to autocomplete a drop down list.

This is my json string:

[{"ID":1,"Name":"david"},{"ID":2,"Name":"Paul"}]

This is my input:

    <input type="text" id="tbNames" />

and this is my javascript:

    //datas variable contains the json string
    function BindNames(datas) { 
        $('#tbNames').autocomplete({
            source: datas,
            minLength: 0,
            scroll: true,
            select: function (event, ui) {
                $("#tbNames").val(ui.item.Name);
                return false;
            } 
        }).focus(function () {
            $(this).autocomplete("search", "");
        });
    }

The problem is that when I click on the 'tbNames' input the drop down list is displayed but names inside are not displayed BUT there are the names inside the list because when I click on on the drop down list one of the two name is displayed inside my input.

http://jsbin.com/wudidaqapo/1/edit?html,css,js,console,output

Thanks for your help.

Upvotes: 0

Views: 2293

Answers (2)

Wahyu Kodar
Wahyu Kodar

Reputation: 674

Try this:

 function BindNames() {
             var datas=[{"ID":1,"Name":"david"},{"ID":2,"Name":"Paul"}];

            $('#tbNames').autocomplete({

               source: function (request, response) {
                response($.grep(($.map(datas, function (v, i) {

                return {
                    label: v.Name,
                    value: v.ID
                };
               })), function (item) {
                  return item.label;
               }));
               },
              minLength: 0,
            scroll: true,

    }).focus(function () {
            $(this).autocomplete("search", "");
        });
}

Upvotes: 1

Ashokbharathi
Ashokbharathi

Reputation: 146

Please see if it help for you.please use the 'label' property in your json object which the Autocompleter uses to find matches

[{"ID":1,"Name":"david","label":"david"},{"ID":2,"Name":"Paul","label":"Paul"}]

Upvotes: 1

Related Questions