我以一种相对简单的方式使用 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; }
}
);
});
如何添加将显示自动完成的所有可用选项的 onclick 事件（如按钮或链接）？基本上，我希望混合使用自动完成和选择/下拉元素。
谢谢！
您可以触发此事件以显示所有选项：
$("#example").autocomplete( "search", "" );
或查看以下链接中的示例。看起来正是您想要做的。
http://jqueryui.com/demos/autocomplete/#combobox
编辑（来自@cnanney）
注意：您必须在自动完成中设置 minLength: 0 以获得空搜索字符串以返回所有元素。
我发现这个效果最好
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())
});
它搜索标签并将值放入元素 $(#example)
我在文档中看不到明显的方法，但是您尝试在启用自动完成的文本框上触发焦点（或单击）事件：
$('#myButton').click(function() {
$('#autocomplete').trigger("focus"); //or "click", at least one should work
});
为了显示所有项目/模拟组合框行为，您应该首先确保已将 minLength 选项设置为 0（默认为 1）。然后你可以绑定点击事件，用空字符串执行搜索。
$('inputSelector').autocomplete({ minLength: 0 });
$('inputSelector').click(function() { $(this).autocomplete("search", ""); });
试试这个：
$('#autocomplete').focus(function(){
$(this).val('');
$(this).keydown();
});
和minLength设置为0
每次都有效:)
解决方案来自：Display jquery ui auto-complete list on focus event
使其不止一次工作的解决方案
<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());
});
});
<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>
您必须设置为零minLength才能使这项工作！这是工作示例。
$( "#dropdownlist" ).autocomplete({
source: availableTags,
minLength: 0
}).focus(function() {
$(this).autocomplete('search', $(this).val())
});
});
$j(".auto_complete").focus(function() { $j(this).keydown(); })
这显示了所有选项：（"%"见下文）
重要的是您必须将它放在前面的 #example 声明下方，如下例所示。这花了我一段时间才弄清楚。
$( "#example" ).autocomplete({
source: "countries.php",
minLength: 1,
selectFirst: true
});
$("#example").autocomplete( "search", "%" );
你可以使用这个：
$("#example").autocomplete( "search", $("#input").val() );
这是唯一对我有用的东西。列表每次显示并在选择时关闭：
$("#example")
.autocomplete(...)
.focus(function()
{
var self = this;
window.setTimeout(function()
{
if (self.value.length == 0)
$(self).autocomplete('search', '');
});
})
希望这可以帮助某人：
$('#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
})
我使用属性 minChars:0 解决了这个问题，然后触发两次点击。（1次点击输入后自动完成显示）我的代码
<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");
}
我已经看到了所有似乎完整的答案。
如果您想在光标位于文本字段中或单击匹配标签时获取列表，请执行以下操作：
//YourDataArray = ["foo","bar"];
$( "#YourID" ).autocomplete({
source: YourDataArray
}).click(function() { $(this).autocomplete("search", " "); });
这在 Firefox、IE、Chrome 中运行良好......
$("#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
});
我无法让这$("#example").autocomplete( "search", "" );部分工作，只有当我使用源中存在的字符更改搜索时，它才能工作。所以我然后使用了 eg $("#example").autocomplete( "search", "a" );。
我想一个更好的选择是把 $("#idname").autocomplete("search", ""); 进入文本框的 onclick 参数。由于在选择时，jquery 将焦点放在了焦点上，这可能是一种解决方法。不知道这是否应该是一个可以接受的解决方案。
我最近需要这样做，在尝试了一些不同的排列（使用 onfocus、onclick 文本框等）之后，我终于确定了这个......
<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>
这将打开焦点上的自动完成 ddl 列表（即使您的输入框中有默认文本，就像我在上面所做的那样）。
它还自动选择文本框中的文本，以防止用户必须清除文本。
一旦从自动完成列表中选择了一个项目，它就会将该项目放入自动完成输入框并将焦点移动到另一个控件（从而防止自动完成重新打开）。
当我有机会时，我计划通过Melting Ice升级将动态 Ajax 调用添加到非常好的选择列表中来替换它。
我用这种方式：
$("#autocomplete").autocomplete({
source: YourDataArray,
minLength: 0,
delay: 0
});
然后
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");
您还可以使用不带参数的搜索功能：
jQuery("#id").autocomplete("search", "");
当输入值为空时，搜索输入中的值。这段代码对我有用：
$("#your_input").on('focus', function () {
$(this).autocomplete('search', $(this).val() == '' ? " " : $(this).val());
});