CODEWITHSUNDEEP
jqueryjquery-autocomplete
Awais Qarni
Awais Qarni

Reputation: 18006

jquery ui autocomplete not working exactly

Hi all I have seen all question related to this problem but couldn't find the solution. I am working with jquery ui autocomplete. My scenario is this,

I have a check box. When It is checked, an ajax request is sent to server which fetch some information from database and returned the json encode data. On success function I call the jquery autocomplete and in source I provide the data returned by my ajax request. When I start writing some thing in my text box, (I can see in firebug console tab) a get request is sent having all my option which are returned from ajax request like this

 http://localhost/project/module/controller/index/%5B%22Mobile%22,%22Watch%22,%22Lamps%22,%22Harry%20Potter%22,%22Suitcase%22,%22Halloween%22,%22Xmas%22,%22Multiple%22,%22oil%22,%22Empty%20Keywords%22,%22iphone%20theme%22,%22Edit%20theme%22,%22Final%20Theme%22%5D?term=mo

and nothing happens. There are no options shown as auto complete. My code is as follows

<input type="checkbox" name="prebuilt-Themes" id="prebuilt-Themes" onclick="get_all_themes();">

Text box

 <input type="text" id="themes" style="display: none;" class="ui-autocomplete-input">

And the function which handles ajax request

 function get_all_themes()
{

    if($("#prebuilt-Themes").is(':checked'))
    {    
     $('#themes').show();   
     $.ajax({
            type:'POST',
            //data:({string:'abc'}),
            url: "<?= $this->baseUrl(); ?>/module/controller/getallthemes",
            success:function(data)
            {
               $(function() {
               $( "#themes" ).autocomplete({
                    source: data

                        });
                });
            }
        });
     }


}

The data which I receive from my Ajax request looks like this

  ["Mobile","Watch","Lamps","Harry Potter","Suitcase","Halloween","Xmas","Multiple","oil","Empty Keywords","iphone theme","Edit theme","Final Theme"]

Can anybody guides my what Am I doing wrong?

Upvotes: 0

Views: 812

Answers (1)

Adam Merrifield
Adam Merrifield

Reputation: 10407

You need to make the ajax response in json format with id, label, and value like so:

[ { "id": "Luscinia svecica", "label": "Bluethroat", "value": "Bluethroat" }, { "id": "Motacilla flava", "label": "Blue-headed Wagtail", "value": "Blue-headed Wagtail" }, { "id": "Cyanistes caeruleus", "label": "Blue Tit", "value": "Blue Tit" }, { "id": "Monticola solitarius", "label": "Blue Rock Thrush", "value": "Blue Rock Thrush" }, { "id": "Anas discors", "label": "Blue-winged Teal", "value": "Blue-winged Teal" }, { "id": "Merops persicus", "label": "Blue-cheeked Bee-eater", "value": "Blue-cheeked Bee-eater" }, { "id": "Tarsiger cyanurus", "label": "Red-flanked Bluetail", "value": "Red-flanked Bluetail" } ]

Upvotes: 1

Related Questions