How to use a jQuery autocomplete combobox with AJAX JSON data?

Question

I need to do the following using a combobox.

• Select box has a default list of cities which the user can search from.
• If a user types in t

Answer 1

Why don't you duplicate the plugins and two combo boxes.

Then:

     $( "#combobox1" ).combobox1({
          select: function (event, ui) { 
           var value = ui.item.value;/*Whatever you have chosen of this combo box*/
            $.ajax({
              type: "POST",
              dataType: 'json',
              url: "script.php",
              data: {
                'anything':value
              },
              success: function(res)
              {
                /*replace your next combo with new one*/
                $("select#combobox2").html(res);
              }
          });
        }
    });
   $( "#toggle" ).click(function() {
    $( "#combobox1" ).toggle();
   });

   $( "#combobox2" ).combobox2();

   $( "#toggle" ).click(function() {
    $( "#combobox2" ).toggle();
   });

PHP file (This is based on Codeigniter):

<?php   
   $data['response'] = 'false';
   $keyword = $_POST['anything'];
   $query4 = $this->db->query("SELECT * FROM table WHERE field='".$keyword."'");
   $data.= "<option></option>";
   if($query4->num_rows() > 0)
   {
       foreach($query5->result_array() as $row)
       {
         $data.= "<option>".$row['something']."</option>";
       }
   }
   echo json_encode($data);
}
?>

Hope this helps.

Answer 2

This may help you.. another autocomplete plugin which I used.

Also read this

If you want to load data dynamically in text field, go with above plugin. Else if you want to go with combo box, then just load the data on ready() and use jquery auto complete plugin!