jQuery使用AJAX JSON自动完成

Question

I'm trying to have dynamic autocomplete values for a textbox.

This is my response:

echo json_encode($res)

0: {type_name: "name1"}
1: {type_name: "name2"}
2: {type_name: "name3"}
3: {type_name: "name4"}
4: {type_name: "name5"}

And this is my autocomple ajax code:

 $( "#txt_box" ).autocomplete({
  source: function( request, response ) {
      $.ajax({
        type:"POST",
        url: "index.php?action=autocomplete",                   
        dataType: "json",
        data: {
            q: request.term
        },
        success: function( data ) {
            response( data );
        }
    });
  }
 });    

I'm not able to figure out if there is any issue in my JSON format or in my AJAX code. I'm not able to get the autocomplete dropdown based on the keysearch.

Answer 1

As described in http://api.jqueryui.com/autocomplete/#option-source , the data object passed to the response callback can be either an array of strings or array of objects with label and value properties. Your response does not seem to be any of these.

So either you have to fix your response, to provide eg [ "name1", "name2", "name3", "name4", "name5" ] (ie array of strings), or you must process this response in your success callback, to forward the data to the response callback in a correct format.

Answer 2

Don't call ajax request into the autocomplete function. As per your requirement, first you need to collect data json format:

var jsonData = ["name1","name2","name3",.......];
$( "#txt_box" ).autocomplete({ source:jsonData });   

Please follow the link: https://jqueryui.com/autocomplete/