单击 jQuery 自动完成查看所有内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1268531/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery autoComplete view all on click?
提问by Rio
I'm using jQuery's autocomplete in a relatively simple way:
我以一种相对简单的方式使用 jQuery 的自动完成功能：
$(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.
如何添加将显示自动完成的所有可用选项的 onclick 事件（如按钮或链接）？基本上我希望混合自动完成和选择/下拉元素。
Thanks!
谢谢！
采纳答案by karim79
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
});
回答by Tom Pietrosanti
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
http://jqueryui.com/demos/autocomplete/#combobox
EDIT(from @cnanney)
编辑（来自@cnanney）
Note: You must set minLength: 0 in your autocomplete for an empty search string to return all elements.
注意：您必须在自动完成中设置 minLength: 0 才能使空搜索字符串返回所有元素。
回答by Craig
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)
它搜索标签并将值放入元素 $(#example)
回答by Nine Tails
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.
为了显示所有项目/模拟组合框行为，您应该首先确保将 minLength 选项设置为 0（默认为 1）。然后就可以绑定点击事件，用空字符串进行搜索。
$('inputSelector').autocomplete({ minLength: 0 });
$('inputSelector').click(function() { $(this).autocomplete("search", ""); });
回答by Cobaltus
try this:
尝试这个：
$('#autocomplete').focus(function(){
$(this).val('');
$(this).keydown();
});
and minLengthset to 0
和minLength设置为0
works every time :)
每次都有效:)
回答by SUF
solution from: Display jquery ui auto-complete list on focus event
解决方案来自：在焦点事件上显示 jquery ui 自动完成列表
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());
});
});
回答by Tom
$j(".auto_complete").focus(function() { $j(this).keydown(); })
回答by Wilzon
<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>
回答by Brane
You mustset minLengthto zeroin order to make this work! Here is the working example.
你必须设定minLength到零，以使这项工作！这是工作示例。
$( "#dropdownlist" ).autocomplete({
source: availableTags,
minLength: 0
}).focus(function() {
$(this).autocomplete('search', $(this).val())
});
});
回答by Renato Chea
you can use this:
你可以使用这个：
$("#example").autocomplete( "search", $("#input").val() );
