blocks|key|1264519|text|我在文档中看不到明显的方法，但您可以尝试在启用自动完成的文本框上触发焦点(或单击)事件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1264520|$('#myButton').click(function()+{
+++$('#autocomplete').trigger("focus");+//or+"click",+at+least+one+should+work
});|code-block|syntax|javascript|1264521|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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:

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

blocks|key|1479366|text|我发现这个效果最好|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1479367|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())
});|code-block|syntax|javascript|1479368|它搜索标签并将值放入元素$(#example)|1479369|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I found this to work best

<pre><code>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())
});
</code></pre>

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

blocks|key|1264846|text|为了显示所有项目/模拟组合框行为，您应该首先确保已将minLength选项设置为0(默认值为1)。然后，您可以绑定click事件以使用空字符串执行搜索。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1264847|$('inputSelector').autocomplete({+minLength:+0+});
$('inputSelector').click(function()+{+$(this).autocomplete("search",+"");+});|code-block|syntax|javascript|1264848|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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.

<pre><code>$('inputSelector').autocomplete({ minLength: 0 });
$('inputSelector').click(function() { $(this).autocomplete("search", ""); });
</code></pre>

blocks|key|1264739|text|解决方案来自：Display+jquery+ui+auto-complete+list+on+focus+event|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1264740|使其不止一次工作的解决方案|1264741|<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());
++++});
});|code-block|syntax|javascript|1264742|​|1264743|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/4132058/display-jquery-ui-auto-complete-list-on-focus-event^0|7|1F|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

solution from: <a href="https://stackoverflow.com/questions/4132058/display-jquery-ui-auto-complete-list-on-focus-event">Display jquery ui auto-complete list on focus event</a>

The solution to make it work more than once

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

blocks|key|1479506|text|<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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1479507|http://jsfiddle.net/wimarbueno/6zz8euqe/|unstyled|offset|length|1479508|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|14|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|Q|8|@]|9|@$G|R|H|S|1|T]]|A|$]]|$1|I|3|-4|5|F|7|U|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|E]]]]

<pre><code>&lt;input type="text" name="q" id="q" placeholder="Selecciona..."/&gt;


&lt;script type="text/javascript"&gt;
//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())
 });
});
&lt;/script&gt;
</code></pre>

<a href="http://jsfiddle.net/wimarbueno/6zz8euqe/" rel="nofollow">http://jsfiddle.net/wimarbueno/6zz8euqe/</a>

blocks|key|1264533|text|+$j(".auto_complete").focus(function()+{+$j(this).keydown();+})|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1264534|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code> $j(".auto_complete").focus(function() { $j(this).keydown(); })
</code></pre>

blocks|key|1264636|text|这将显示所有选项："%25"+(如下所示)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1264637|重要的是，您必须将它放在前面的#example声明下面，如下面的示例所示。我花了一段时间才弄明白。|1264638|$(+"#example"+).autocomplete({
++++++++++++source:+"countries.php",
++++++++++++minLength:+1,
++++++++++++selectFirst:+true
});

$("#example").autocomplete(+"search",+"%25"+);|code-block|syntax|javascript|1264639|entityMap^0|9|3|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

this shows all the options: <code>"%"</code> (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.

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

$("#example").autocomplete( "search", "%" );
</code></pre>

blocks|key|1479254|text|您可以使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1479255|$("#example").autocomplete(+"search",++$("#input").val()+);|code-block|syntax|javascript|1479256|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

you can use this:

<pre><code>$("#example").autocomplete( "search", $("#input").val() );
</code></pre>

blocks|key|1264695|text|这是唯一对我有效的方法。每次都会显示列表，并在选择时关闭：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1264696|$("#example")
.autocomplete(...)
.focus(function()
{
++var+self+=+this;

++window.setTimeout(function()
++{
++++if+(self.value.length+==+0)
++++++$(self).autocomplete('search',+'');
++});
})|code-block|syntax|javascript|1264697|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

this is the only thing that works for me. List shows everytime and closes upon selection:

<pre><code>$("#example")
.autocomplete(...)
.focus(function()
{
 var self = this;

 window.setTimeout(function()
 {
 if (self.value.length == 0)
 $(self).autocomplete('search', '');
 });
})
</code></pre>

blocks|key|1479487|text|希望这能帮助到某些人：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1479488|$('#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
++++++++})|code-block|syntax|javascript|1479489|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

hope this helps someone:

<pre><code>$('#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
 })
</code></pre>

blocks|key|1264721|text|我使用minChars属性解决了这个问题:0和after，触发两次单击。(1次单击输入后自动完成显示)我的代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1264722|<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");
}|code-block|syntax|javascript|1264723|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>&lt;input type='text' onfocus='setAutocomplete(this)'&gt;

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

blocks|key|1479461|text|我已经看到了所有似乎是完整的答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1479462|如果您想在光标位于文本字段中或单击匹配的标签时获取列表，则可以执行以下操作：|1479463|//YourDataArray+=+["foo","bar"];
$(+"#YourID"+).autocomplete({
++++++++++++source:+YourDataArray+
++++++++}).click(function()+{+$(this).autocomplete("search",+"+");+});|code-block|syntax|javascript|1479464|这在Firefox，IE，Chrome中运行良好...|1479465|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I have seen all the answers which seem to be complete.

If you want to get the list when the cursor is in the text field OR when you click on the matching label, here how you can do:

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

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

blocks|key|1264898|text|$("#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
++++++++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1264899|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$("#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
 });
</code></pre>

blocks|key|1479198|text|我不能让$("#example").autocomplete(+"search",+""+);部件工作，只有一次我改变了我的搜索存在于我的源码中的一个字符它工作。因此，我使用了例如$("#example").autocomplete(+"search",+"a"+);。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1479199|entityMap^0|4|17|2I|18|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

I could not get the <code>$("#example").autocomplete( "search", "" );</code> part to work, only once I changed my search with a character that exists in my source it work. So I then used e.g. <code>$("#example").autocomplete( "search", "a" );</code>.

blocks|key|1264813|text|我想更好的选择是将$("#idname").autocomplete(+"search"，"“)；放入文本框的onclick参数中。因为在select时，jquery会放入一个焦点，所以这可能是一种变通方法。不知道这是否应该是一个可接受的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1264814|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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 .
Dont know if it should be an acceptable solution.

blocks|key|1264916|text|我是这样使用的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1264917|$("#autocomplete").autocomplete({
++++++++++++++++source:+YourDataArray,
++++++++++++++++minLength:+0,
++++++++++++++++delay:+0
++++++++++++});|code-block|syntax|javascript|1264918|然后|1264919|OnClientClick="Suggest(this);+return+false;"/>

+function+Suggest(control)+{
++++++++++++++++var+acControl+=+$("#"+%2B+control.id).siblings(".ui-autocomplete-input");
++++++++++++++++var+val+=+acControl.val();
++++++++++++++++acControl.focus();
++++++++++++++++acControl.autocomplete("search");|1264920|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I used this way:

<pre><code>$("#autocomplete").autocomplete({
 source: YourDataArray,
 minLength: 0,
 delay: 0
 });
</code></pre>

Then 

<pre><code>OnClientClick="Suggest(this); return false;"/&gt;

 function Suggest(control) {
 var acControl = $("#" + control.id).siblings(".ui-autocomplete-input");
 var val = acControl.val();
 acControl.focus();
 acControl.autocomplete("search");
</code></pre>

blocks|key|1264957|text|您也可以使用不带参数的搜索函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1264958|jQuery("#id").autocomplete("search",+"");|code-block|syntax|javascript|1264959|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can also use search function without parameters:

<pre><code>jQuery("#id").autocomplete("search", "");
</code></pre>

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

<pre><code>$(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; }
 }
 );
 });
</code></pre>

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 view all on click?

SQL Server

PostgreSQL

MongoDB

jQuery

MySQL

JSON

Java

我正在以一种相对简单的方式使用jQuery的自动完成功能：$(document).ready(function() {  var data = [ {text: "Choice 1"},                {text: "Choice 2"},                {text: "Choice 3"} ]$("#example").autocomplete(data, {  

问jQuery autoComplete在单击时查看所有内容？
EN

回答 17

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery autoComplete在单击时查看所有内容？EN

回答 17

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery autoComplete在单击时查看所有内容？
EN