jQuery autoComplete view all on click?

Related searches

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!

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

JQeury Autocomplete - show all results - JavaScript, <title>jQuery UI Autocomplete Testt</title> Can be called with an empty string and minLength: 0 to display all items. solidus_it select: function (event, ui) { 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"}

You can trigger this event to show all of the options:

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

Or see the example in the link below. Looks like exactly what you want to do.

http://jqueryui.com/demos/autocomplete/#combobox

EDIT (from @cnanney)

Note: You must set minLength: 0 in your autocomplete for an empty search string to return all elements.

Open autocomplete menu on focus of textbox?, Hello, I want to use the autocomplete menu for a textbox, but instead of up with all available options first on focus, then narrow as you type. Because after you click your selection, your focus changes, but then it refocuses the text box after your selection populates. 7 Replies; 30369 Views; 1 Followers� 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.

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)

Autocomplete Widget, Description: Autocomplete enables users to quickly find and select from a Can be called with an empty string and minLength: 0 to display all items. value. jQuery autoComplete view all on click? 68. Drop Down Menu/Text Field in one. 9. autocomplete show all options on focus. 4. How to make jQuery autocomplete list display all options onfocus and hide after option is selected? 0. Auto populate AutoCompleteExt

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

Autocomplete, Autocomplete. Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. Examples. $ (selector, context).autocomplete ("action", params) Method. The autocomplete ("action", params) method can perform an action on the list of suggestions, such as show or hide. The action is specified as a String in the first argument (e.g., "close" to hide the list). Check out the actions that can be passed, in the following table.

try this:

    $('#autocomplete').focus(function(){
        $(this).val('');
        $(this).keydown();
    }); 

and minLength set to 0

works every time :)

[Solved] Jquery autocomplete click event, Hi all. I have a problem with the jquery autocomplete ui. When i type something in the autocomplete textbox i load data into a table. When the user� I've been trying to figure out how to submit the form when the person selects the result from choices of the autocomplete. It needs to work with a mouse click or enter button. I see examples out there but always in pieces. No one shows the entire function. I have this code below but I get errors saying result is not a function. I don't know how

The selected event should fire automatically on click. Consider the following code block. Here I pass in a set of handlers to decide things like what url to use, what label to attach the auto complete behavior to etc. Ultimately making an ajax request to populate the auto complete list.

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Hi all. I have a problem with the jquery autocomplete ui. When i type something in the autocomplete textbox i load data into a table. When the user selects an option from the autocomplete list the data in the table should change, however this is only working when i use the keyboard to select an option not when i click on the option with the mouse.

Comments
  • See Tom Pietrosanti's answer bellow for the way to do this without using a trigger or a button.
  • See Craig's answer below as well.
  • This worked PERFECTLY! I changed a little, and on my input element put onfocus="javascript:$(this).autocomplete('search','');" . Thanks for the help!
  • Worked great for me. You must set minLength: 0 in your autocomplete for an empty search string to return all elements. Mine was set to 1 and took a little while to figure out why wasn't working.
  • Glad it worked! And thanks for the clarification, cnanney! I didn't consider that at the time.
  • This is the correct answer. Would be nice if there was a .show() option though!
  • just got what I wanted..great solution. Final problem solved by @cnanney too.
  • I like this answer the best because if you use <key>Tab</key> to switch focus between inputs, it becomes clear that the the text input has autocomplete available. Some people don't use the mouse to click everything ;)
  • This is great! For all those who are having difficulties to get this working, the minLength: 0 parameter seems to be essential to get this working! ;)
  • I tried this, and it worked fine the first time, but after the textbox was focused and then unfocused, if i went back to it a second time it no longer showed the autocomplete list until i refreshed the page, at which point it would again work only once.
  • $(".auto_complete").focus(function() { $(this).trigger("keydown") }) -> This works!
  • You may need to set minChars to 0.
  • is it working if you do: $("#example").autocomplete( "search", " " ); ?