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 text in the input box, I need to make an ajax call to fetch data and display the options to the user.
If data was fetched for user's request, those cities should be appended to the options of Select box

Using jQuery autocomplete I am able to fetch json data on user entering a string and displaying the results. However, I am quite clueless on how to integrate this using combobox.

Combobox uses a static data array to search from and if I understand this correctly, uses regular expression to match values. However, how do I interrupt it and uses the ajax call to fetch data from server and update the results ?

Autocomplete for input text box:

$( "#searchDestination" ).autocomplete({
        delay: 500,
        source: function( request, response ) {
            $.ajax({
                url: "/wah/destinationsJson.action",
                dataType: "json",
                data: {
                    term: request.term
                },
                type: "POST",
                success: function(data){
                    if(data.cities.length == 0)
                        return response(["No matching cities found for " + request.term]);
                    response( $.map(data.cities, function(item){
                        return{
                            label: item.name,
                            value: item.name
                        };
                    })
                    );
                }
            });
        },
        minLength: 2

    });
    });

@ltiong_sh My autocomplete for simple input text box works fine with JSON. (updated my answer though) — brainydexter
– brainydexter, Commented May 29, 2012 at 11:02
when you say fetched list should be appended to default list, does that mean default items will always be visibile, or will they be filtered as well..based on user input? — ltiong_dbl
– ltiong_dbl, Commented May 29, 2012 at 11:04
The fetched results should be appended to the set of original list of options. Based on the user input, only those options that match the criterion should be visible. — brainydexter
– brainydexter, Commented May 29, 2012 at 11:07

Community · Accepted Answer · 2017-05-23 12:17:19Z

2

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

6 Comments

brainydexter Over a year ago

I was hoping to extend/reuse the combobox on jquery site itself. Also, can't load all the data onReady since its quite a lot of data. Need to do prefix searching based on the prefix specified in the input text box.

Jebin Over a year ago

Why should it be necessarily combo box and why not a text field?

brainydexter Over a year ago

My requirement is such that I need both a textfield which works like an autocomplete based on prefix matching and a combobox that yields all the options.

Jebin Over a year ago

Controversy!! Then you need to customize the plugin and find a way where you can update the options in combo box depending on each request. Let me try a little.

Jebin Over a year ago

Go to this fiddle and check.Here I think, you can update the "availableTags" variable using ur own jquery ajax. Give a try.

|

Dharmesh · Accepted Answer · 2014-02-08 23:24:45Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related