jQuery autoComplete view all on click?

Question

I\'m using jQuery\'s autocomplete in a relatively simple way:

$(document).ready(function() {
  var data = [ {text: \"Choice 1\"}, 
               {text: \"Ch         


        

Answer 1

In order to show all items / simulate combobox behavior, you should first ensure you have set the minLength option to 0 (default is 1). Then you can bind the click event to perform a search with the empty string.

$('inputSelector').autocomplete({ minLength: 0 });
$('inputSelector').click(function() { $(this).autocomplete("search", ""); });

Answer 2

solution from: Display jquery ui auto-complete list on focus event

The solution to make it work more than once

<script type="text/javascript">
$(function() {
    $('#id').autocomplete({
        source: ["ActionScript",
                    /* ... */
                ],
        minLength: 0
    }).focus(function(){     
        //Use the below line instead of triggering keydown
        $(this).data("autocomplete").search($(this).val());
    });
});

Answer 3

I needed to do this recently and after trying a few different permutations (using onfocus, onclick of textbox etc), I finally settled on this...

 <input id="autocomplete" name="autocomplete" type="text" 
 value="Choose Document">

 <p>
 <button type="submit" value="Submit" name="submit" id="submit" >
  Submit
 </button>
 </p>

<script type="text/javascript">

$("#autocomplete").autocomplete(
{
source: '@Url.Content("~/Document/DocumentTypeAutoComplete/")' //<--ddl source
, minLength: 0 // <-- This is necessary to get the search going on blank input
, delay: 0
, select: function (event, ui) 
  {
  if (ui.item) {
     $("#autocomplete").val(ui.item.value);//<-- Place selection in the textbox
          $("docForm").submit(); 
          loadDocTypeCreatePartial(ui.item);
          $("#submit").focus(); //This stops the drop down list from reopening 
                                // after an item in the select box is chosen
                                // You can place the focus anywhere you'd like,
                                // I just chose my *submit* button
                }
   }
  }).focus(function () {
    // following line will autoselect textbox text
    // making it easier for the user to overwrite whats in the 
    // textbox
    $(this).select();

    //The below line triggers the search function on an empty string
    $(this).data("autocomplete").search('');
   });
 </script>

This opens the autocomplete ddl list on focus (Even if you have default text in your input box like I do above).

It also auto-selects the text in the text box to prevent the user from having to clear out the text.

Once an item is selected from the auto-complete list, it puts that item into the auto-complete input box and moves the focus to another control (thus preventing the auto-complete from reopening).

I plan on replacing it by adding dynamic Ajax calls to the very nice Chosen select lists with the Melting Ice upgrade when I get a chance.

Answer 4

I solved this using attribute minChars:0 and after, trigger two clicks. (autocomplete shows after 1 click on input) my code

<input type='text' onfocus='setAutocomplete(this)'>

function setAutocomplete(el){
    $(el).unbind().autocomplete("./index.php", {autoFill:false, minChars:0, matchContains:true, max:20});
    $(el).trigger("click");$(el).trigger("click");
}

Answer 5

this shows all the options: "%" (see below)

The important thing is that you have to place it underneath the previous #example declaration, like in the example below. This took me a while to figure out.

$( "#example" ).autocomplete({
            source: "countries.php",
            minLength: 1,
            selectFirst: true
});

$("#example").autocomplete( "search", "%" );

Answer 6

hope this helps someone:

$('#id')
        .autocomplete({
            source: hints_array,
            minLength: 0, //how many chars to start search for
            position: { my: "left bottom", at: "left top", collision: "flip" } // so that it automatically flips the autocomplete above the input if at the bottom
            })
        .focus(function() {
        $(this).autocomplete('search', $(this).val()) //auto trigger the search with whatever's in the box
        })