Display Two jQuery Autocompletes Dropdown Result In A Single Input


Notice: Undefined variable: return_string in /home/advchawe/public_html/wp-content/plugins/wp-fiddle/wp_fiddle.php on line 176

The title may be a little confusing at first. But to make it clear, I’m going to show how the jQuery Autocomplete (at my case) in action on jsFiddle. Here it is :

The code above will show the dropdown result in the ‘City’ input. In this example, the cities list are very limited. Here they are : ‘Abu Dhabi’, ‘Abuja’, ‘Accra’, ‘Amsterdam’, ‘Addis Ababa’, ‘Baghdad’, ‘Baku’, ‘Bamako’, ‘Bangkok’, ‘Beijing’, ‘Cairo’, ‘Canberra’ and ‘Caracas’. You can type at least two letters to show the dropdown at the input. For example : If you type ‘ba’, the dropdown will show some cities like ‘Addis Ababa’, ‘Baghdad’, ‘Baku’, ‘Bamako’ and ‘Bangkok’. If you select ‘Bangkok’ then press a spacebar, another dropdown will be displayed at the same input box. So it’ll be displayed like these : ‘Bangkok Accommodation’, ‘Bangkok Restaurants’, ‘Bangkok Sights’, and ‘Bangkok Transport’. Here is the full code :

  1. <html>
  2.     <head>
  3.         <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  4.         <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  5.         <script type="text/javascript">
  6.             $(function() {
  7.                 var Cities = [
  8.                     'Abu Dhabi',
  9.                     'Abuja',
  10.                     'Accra',
  11.                     'Amsterdam',
  12.                     'Addis Ababa',
  13.                     'Baghdad',
  14.                     'Baku',
  15.                     'Bamako',
  16.                     'Bangkok',
  17.                     'Beijing',
  18.                     'Cairo',
  19.                     'Canberra',
  20.                     'Caracas'
  21.                 ];
  22.                 $('#dest').autocomplete({
  23.                     source: Cities,
  24.                     minLength: 2,
  25.                     select: function (event, ui) {
  26.                         $(this).val(ui.item.value);
  27.                         $('#temp_val').val(ui.item.value);
  28.                         $(this).blur();
  29.                         $(this).focus();
  30.                         //the second autocomplete
  31.                         var more=[
  32.                             ui.item.value + ' Accommodation',
  33.                             ui.item.value + ' Restaurants',
  34.                             ui.item.value + ' Sights',
  35.                             ui.item.value + ' Transport'
  36.                         ];
  37.                         $('#dest').autocomplete({
  38.                             source: more,
  39.                             select: function (event, ui) {
  40.                                 $(this).val(ui.item.value);
  41.                                 $('#temp_val').val(ui.item.value);
  42.                             }
  43.                         });
  44.                     }
  45.                 });
  46.                 $('#dest').keypress(function(event){
  47.                     var dest = $.trim($('#dest').val());
  48.                     var temp_val = $.trim($('#temp_val').val());
  49.  
  50.                     if(temp_val != ''){
  51.                         if(event.which != 32)
  52.                             $('#dest').autocomplete('option','source',Cities);
  53.                         else{
  54.                             var arr=[' Accommodation',' Restaurants',' Sights',' Transport'];
  55.                             var found_arr='';
  56.                             $.each(arr,function(index,value){
  57.                                 if(temp_val.indexOf(value) >= 0){
  58.                                     found_arr=value;
  59.                                     return false;
  60.                                 }
  61.                             });
  62.                             if(found_arr != '')
  63.                                 temp_val=temp_val.replace(found_arr,'');
  64.                             var more=[
  65.                                 temp_val + ' Accommodation',
  66.                                 temp_val + ' Restaurants',
  67.                                 temp_val + ' Sights',
  68.                                 temp_val + ' Transport'
  69.                             ];
  70.                             $('#dest').autocomplete('option','source',more);
  71.                         }    
  72.                     }
  73.                 });
  74.             });
  75.         </script>
  76.     </head>
  77.     <body>
  78.         <div>
  79.             <span><em><strong>City</strong></em></span>
  80.             <br />
  81.             <span><input type="text" id="dest" name="dest" value="" placeholder="Type the name of the city ... " /></span>
  82.             <input type="hidden" id="temp_val" name="temp_val" value="">
  83.         </div>
  84.     </body>
  85. </html>

From the above code, the first autocomplete seems ordinary that you can see from many examples on internet.

  1. $('#dest').autocomplete({
  2.     source: Cities,
  3.     minLength: 2,
  4.     select: function (event, ui) {
  5.         //code
  6.     }
  7. });

To add another dropdown after the first one and use the first selected item, you can do it like this.

  1. $('#dest').autocomplete({
  2.     source: Cities,
  3.     minLength: 2,
  4.     select: function (event, ui) {
  5.         $(this).val(ui.item.value);
  6.         $('#temp_val').val(ui.item.value);
  7.         $(this).blur();
  8.         $(this).focus();
  9.         //the second autocomplete
  10.         var more=[
  11.             ui.item.value + ' Accommodation',
  12.             ui.item.value + ' Restaurants',
  13.             ui.item.value + ' Sights',
  14.             ui.item.value + ' Transport'
  15.         ];
  16.         $('#dest').autocomplete({
  17.             source: more,
  18.             select: function (event, ui) {
  19.                 $(this).val(ui.item.value);
  20.                 $('#temp_val').val(ui.item.value);
  21.             }
  22.         });
  23.     }
  24. });

Actually the above code just work for the first time. I mean, if you type the two letter, the first dropdown will be displayed. Also the second dropdown after that. But if you want to change the city, it’ll will not anymore like expected. Somehow the jquery autocomplete hangs. You have to refresh your browser to make it works. Its annoying.

After many trying, I got a solution (I dont know if this is the best) to handle the problem. I bind the keypress event of the input, check the last value of the input and change the source input. Here is the code :

  1. $('#dest').keypress(function(event){
  2.     var dest = $.trim($('#dest').val());
  3.     var temp_val = $.trim($('#temp_val').val());
  4.  
  5.     if(temp_val != ''){
  6.         if(event.which != 32)
  7.             $('#dest').autocomplete('option','source',Cities);
  8.         else{
  9.             var arr=[' Accommodation',' Restaurants',' Sights',' Transport'];
  10.             var found_arr='';
  11.             $.each(arr,function(index,value){
  12.                 if(temp_val.indexOf(value) >= 0){
  13.                     found_arr=value;
  14.                     return false;
  15.                 }
  16.             });
  17.             if(found_arr != '')
  18.                 temp_val=temp_val.replace(found_arr,'');
  19.             var more=[
  20.                 temp_val + ' Accommodation',
  21.                 temp_val + ' Restaurants',
  22.                 temp_val + ' Sights',
  23.                 temp_val + ' Transport'
  24.             ];
  25.             $('#dest').autocomplete('option','source',more);
  26.         }    
  27.     }
  28. });

I use temp_val variable to track the last value, if it exist, then catch the spacebar key and changes the source.

Loading