JQuery autoComplete view all on click?

Question

I use jQuery 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 to add an onclick event (for example, a button or link) in which all available autocomplete options will be displayed? I am mainly looking to create a hybrid autocomplete and a select / dropdown element.

Thank!

Answer 1

I don’t see an obvious way to do this in the documents, but you are trying to fire a focus (or click) event in a text box with autocomplete enabled:

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

Answer 2

You can trigger this event to show all parameters:

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

Or see an example in the link below. It seems 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 in order to return all elements.

Answer 3

I found this works 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 for labels and places the value in the $ element (# example)

Answer 4

To show all elements / simulate combobox behavior, you must first make sure that you set the minLength parameter to 0 (default is 1). You can then bind the click event to perform a search with an empty string.

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

Answer 5

from Display jquery ui auto-complete list in focus

The solution is 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 6

  $j(".auto_complete").focus(function() { $j(this).keydown(); }) 

Answer 7

try the following:

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

and minLength is set to 0

works every time :)

Answer 8

You must set minLength to zero to make this work! Here is a working example.

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

Answer 9

this shows all parameters: "%" (see below)

The important thing is that you must place it under the previous #example declaration, as in the example below. It took me a while to understand.

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

Answer 10

you can use this:

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

Answer 11

This is the only thing that works for me. The list shows each time and closes when you select:

 $("#example") .autocomplete(...) .focus(function() { var self = this; window.setTimeout(function() { if (self.value.length == 0) $(self).autocomplete('search', ''); }); }) 

Answer 12

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 in the box }) 

Answer 13

 <input type="text" name="q" id="q" placeholder="Selecciona..."/> <script type="text/javascript"> //Mostrar el autocompletado con el evento focus //Duda o comentario: http://WilzonMB.com $(function () { var availableTags = [ "MongoDB", "ExpressJS", "Angular", "NodeJS", "JavaScript", "jQuery", "jQuery UI", "PHP", "Zend Framework", "JSON", "MySQL", "PostgreSQL", "SQL Server", "Oracle", "Informix", "Java", "Visual basic", "Yii", "Technology", "WilzonMB.com" ]; $("#q").autocomplete({ source: availableTags, minLength: 0 }).focus(function(){ $(this).autocomplete('search', $(this).val()) }); }); </script> 

http://jsfiddle.net/wimarbueno/6zz8euqe/

Answer 14

I solved this using the minChars: 0 attribute and after, launch two clicks. (autocomplete shows after 1 click on the 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 15

I saw all the answers that seem complete.

If you want to get a list when the cursor is in the text box OR when you click on the corresponding shortcut, here is how you can do it:

 //YourDataArray = ["foo","bar"]; $( "#YourID" ).autocomplete({ source: YourDataArray }).click(function() { $(this).autocomplete("search", " "); }); 

this works fine in Firefox, IE, Chrome ...

Answer 16

 $("#searchPkgKeyWord").autocomplete("searchURL", { width: 298, max: 1000, selectFirst: false }).result(function (event, row, formatted) { callback(row[1]); }).focus(function(){ $(this).click(); //once the input focus, all the research will show }); 

Answer 17

I could not force part of $("#example").autocomplete( "search", "" ); only work when I change my search with the symbol that exists in my source, it works. So I then used, for example, $("#example").autocomplete( "search", "a" ); .

Answer 18

I think the best option is to put $ ("# idname"). autocomplete ("search", ""); into the onclick parameter of the text field. Since when selected, focus is placed in jquery, this can be a workaround. I don’t know if it should be an acceptable solution.

Answer 19

I needed to do this recently, and after trying several 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 ddl autocomplete list in focus (even if you have the default text in the input field as shown above).

It also automatically selects text in the text box so that the user cannot clear the text.

As soon as an element is selected from the autocomplete list, it places this element in the autocomplete input field and moves focus to another control (thus preventing the autocomplete from reopening).

I plan to replace it with adding dynamic Ajax calls to the very nice Chosen pick lists with Refreshing Melting Ice when I get a chance.

Answer 20

I used this method:

 $("#autocomplete").autocomplete({ source: YourDataArray, minLength: 0, delay: 0 }); 

Then

 OnClientClick="Suggest(this); return false;"/> function Suggest(control) { var acControl = $("#" + control.id).siblings(".ui-autocomplete-input"); var val = acControl.val(); acControl.focus(); acControl.autocomplete("search"); 

Answer 21

You can also use the search function without parameters:

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