7

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

    });
    });
Beryllium
  • 12,808
  • 10
  • 56
  • 86
brainydexter
  • 19,826
  • 28
  • 77
  • 115
  • what does your autocomplete source data look like? – ltiong_sh May 29 '12 at 10:54
  • @ltiong_sh My autocomplete for simple input text box works fine with JSON. (updated my answer though) – brainydexter May 29 '12 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_sh May 29 '12 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 May 29 '12 at 11:07

2 Answers2

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!

Community
  • 1
  • 1
Jebin
  • 702
  • 13
  • 33
  • 1
    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. – brainydexter May 29 '12 at 10:49
  • Why should it be necessarily combo box and why not a text field? – Jebin May 29 '12 at 11:03
  • 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. – brainydexter May 29 '12 at 11:10
  • 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 May 29 '12 at 11:48
  • Go to [_this fiddle_](http://jsfiddle.net/andrewwhitaker/CDYBk/1/) and check.Here I think, you can update the "availableTags" variable using ur own jquery ajax. Give a try. – Jebin May 29 '12 at 11:55
  • If that is not fine, [_this is new plugin I found_](http://dhtmlx.com/docs/products/dhtmlxCombo/) that matches your requirement almost. – Jebin May 29 '12 at 12:15
0

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.

Dharmesh
  • 52
  • 1
  • 6