jQuery autoComplete view all on click?

user_129735 0
Viewed 110691

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

$(document).ready(function() {
  var data = [ {text: "Choice 1"}, 
               {text: "Choice 2"}, 
               {text: "Choice 3"} ]

$("#example").autocomplete(data, {
  matchContains: true,
  minChars: 0,
  formatItem: function(item) 
    { return item.text; }
    }
  );
  });

How do I add an onclick event (like a button or a link) that will display all the available choices for the autocomplete? Basically I'm looking to make a hybrid of an autocomplete and a select/dropdown element.

Thanks!

jquery-autocomplete autocomplete jquery
22 Answers

I found this to work best

var data = [
    { label: "Choice 1", value: "choice_1" },
    { label: "Choice 2", value: "choice_2" },
    { label: "Choice 3", value: "choice_3" }
];

$("#example")
.autocomplete({
    source: data,
    minLength: 0
})
.focus(function() {
    $(this).autocomplete('search', $(this).val())
});

It searches the labels and places the value into the element $(#example)

user_7496580

I can't see an obvious way to do that in the docs, but you try triggering the focus (or click) event on the autocomplete enabled textbox:

$('#myButton').click(function() {
   $('#autocomplete').trigger("focus"); //or "click", at least one should work
});
user_703930

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", "%" );
user_5451470

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
        })
user_12108520

I guess a better option is to put $("#idname").autocomplete( "search", "" ); into the onclick paramter of the text box .

Since on select, a focus is put in by jQuery, this can be a workaround. Don't know if it should be an acceptable solution.

user_11988980

You can also use search function without parameters:

jQuery("#id").autocomplete("search", "");
user_114113840

When input value is empty search else the value inside input. This code works for me:

$("#your_input").on('focus', function () {
   $(this).autocomplete('search', $(this).val() == '' ? " " : $(this).val());    
});
user_97684600
Related