CODEWITHSUNDEEP
jqueryautocompleteclick
Smudger
Smudger

Reputation: 10809

jquery autocomplete dropdown to populate on click

I am using jquery autocomplete to populate a dropdown list. 

<script type="text/javascript"> 
$(document).ready(function () {

    $("#area").autocomplete( 
     { 

     source: "get_areas", 
     messages: 
     { 
     noResults: '', 
     results: function() {} 
     }, 
     select: function( event, ui ) 
         { 
          var selectedObj = ui.item; 
          var selectedobjectorder = selectedObj.value
          var substr = selectedobjectorder.split(': ');
          $('input[name^="selectedarea"]').val(substr[0]);
          var area=substr[0];

                  //get table data from DB
                  $.post("get_find_demand_all", { vararea:area, varperiod: $('#period').val()}).done(function(data) { 
                    $('#results').html(data);
                  }); 
         }
     });
});
</script>

This works 100% as desired. what I want though is to also populate the dropdown with all options when the dropdown list is clicked.

currently the user has to enter a string to trigger the population. is it possible to populate the field with all entries on click? to filter the dropdown the user can then enter some string and repopulate the dropdown with the results?

my database query get_areas is effectively: select distinct(area) from customer_address where area like %inserted string%

SQL does return all rows for like '%%'

How can I modify the jquery for this?

Thanks and Regards,

Upvotes: 0

Views: 2173

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388436

You can use the search method to manually trigger search

Note: You need to set the minLength option to 0 otherwise the default search will not work

$(document).ready(function () {

    $("#area").autocomplete({ 
        minLength: 0,
        source: "get_areas", 
        messages: 
        { 
            noResults: '', 
            results: function() {} 
        }, 
        select: function( event, ui ) 
        { 
            var selectedObj = ui.item; 
            var selectedobjectorder = selectedObj.value
            var substr = selectedobjectorder.split(': ');
            $('input[name^="selectedarea"]').val(substr[0]);
            var area=substr[0];

            //get table data from DB
            $.post("get_find_demand_all", { vararea:area, varperiod: $('#period').val()}).done(function(data) { 
                $('#results').html(data);
            }); 
        }
    }).click(function(){
        $(this).autocomplete('search', '')
    });
});

Upvotes: 2

Xavi
Xavi

Reputation: 306

Try adding this

jQuery('#area').click(function(){
        jQuery(this).val('');
        jQuery(this).keydown();
    });

Upvotes: 0

Related Questions