Jquery Autocomplete widget implementation

Question

I am trying to convert a normal field to autocomplete and making a ajax call to get the data in JSON and then set it to that autocomplete.

I do not know much on JQUERY, I spent around 5-6 hours just to know I have to initialize before using any function on the auto complete field.

What I have done so far I managed to initialize and convert my text field to autocomplete and checked that using the inspect option it shows autocomplete , and also am able to make the ajax call which is pulling the data verified that using f12 network option.But it does not show up as a type ahead in my autocomplete option.

HTML

<div id ="myName">
    <table class="some_class">
        <tbody>
            <tr>
                <td >
                    <label>NAMES</label>
                </td>
            </tr>
            <tr>
                <td >
                    <input type="text" id="nameText" />
                </td>
            </tr>
        </tbody>
    </table>            
</div>

initialization part

    myName.on('valueChange',function (value){
    $("#nameText").autocomplete({
       appendTo:"#nameText",
       source:function(event,ui){
    var name=myName.value();
    $.ajax({
    url: "www.getmeSomeData.com/query/name:"+name,
    type:"GET".
    dataType:"json",
    success:function(result){
    //set this result in autocomplete which I am not sure how to do
    }
    });
    },minLength:1});
    });

$("#nameText").focus(function(even,ui){
$((this).data("uiAutocomplete").search$(this).val());
});

PROBLEM

1.The autocomplete does not show any result even though from ajax call i see json data coming. 2.The value change starts only after i type abc and then move the cursor somewhere else and then click it back,before that nothing invokes.Where as what is expected is as soon as I type a or ab or abc it should make ajax call and pull the data show in autocomplete dropdown.

Can someone please help? I did not come here without researched but I think i tried a lot of things and nothing worked so am totally confused.Kindly help me, i have spent around 2 days on this.

Thanks in advance.

Answer 1

I finally figured out what was the problem in my code.I actually was not able to add option to my input autocomplete.To make it work I needed to update my html with

HTML just replace <input class="nameClass" type="text" id="nameText" />

And the jquery part needed updates, the above was just a very novice attempt.

 1. I should have used $.each($(".nameClass"), function(index, item) {
 2. and then $(item).autocomplete
 3. Also in source should have used source:function(request,response)
 4. In the ajax call request.term (which will take whatever you input in the autocomplete field where as my method was invoking the ajax call only after tab out.
 5. Map the data of response response($.map(data.data, function(item){
 6. Write a select callback function to make anything happen after i click on any entry in the typeahead
 7.data("ui-autocomplete")._renderItem = function (ul, item) { >To show the data in a formatted way after the ajax call.

INITIALIZATION

 $.each($(".nameClass"), function(index, item) {
    $(item).autocomplete({
       source:function(request,response){
    $.ajax({
    url: "www.getmeSomeData.com/query/name:"+request.term,
    type:"GET".
    dataType:"json",


success:function(result){
    //set this result in autocomplete which I am not sure how to do
      response($.map(data.data, function(item){
                  return{
                  value:item.somethigncomingfromJson //will set into the field
                  data:item
                }}))}}
     });
    } ,minLength :2,
    select:function(event,ui){
   //do something on select of a row in the autocomplete dropdown
    }}).data("ui-autocomplete")._renderItem=function(ul,item){
   return $("format in which you want to see the data").appendTo(ul);
   });
  }

No other event is required.