输入 jQuery 自动完成文本框时显示整个列表

Posted 2023-05-08

【中文标题】输入 jQuery 自动完成文本框时显示整个列表

【英文标题】：Display entire list upon entering a jQuery autocomplete textbox

【发布时间】：2011-08-23 16:22:24

【问题描述】：

我正在使用jQuery autocomplete plugin。有没有一种方法可以在用户输入文本框（已连接为具有自动完成功能）时，列表出现在最上面的字母项目中？某种触发器？

jQuery 代码

$('.someTextbox').autocomplete( source: function (request, response) $.ajax( url: serviceUrl + "/AddDocumentLinesService.svc/GetLineTypes", contentType: "application/json; charset=utf-8", dataType: "json", cache: false, data: maxRows: 10, textStartsWith: 请求。 term , 成功：函数（数据） response($.map(data, function (item) return 标签：item.LineTypeCode + ' - (' + item.Description + ')', value: item.LineTypeCode )); , 错误：函数 (XMLHttpRequest, textStatus, errorThrown) alert(textStatus); ); );

我希望用户在第二次输入“$('.someTextbox')”文本框时会出现列表。

【参考方案1】：

试试：

 $('.someTextbox').focus(function()  $(this).search(); );

根据文档， .search() 手动触发搜索。您还可以将 options.minChars 设置为 0 并将 options.delay 设置为较小的值，这也应该可以。见：http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

【讨论】：

这几乎是正确的。我试过 .search() 并且失败了。然后我意识到我正在使用它的 jQuery UI 实现，因为自动完成插件已迁移到 jQuery.UI 项目中。所以在这里可以找到一个小的变化jqueryui.com/demos/autocomplete/#method-search $(this).autocomplete("search", " ");

【参考方案2】：

也许您可以尝试将minChars option 设置为0，并让GetLineTypes 检查给定字符串的长度。如果它是 0 长度 - 返回第一个字母项目。

另一个选项是连接到文本框的焦点事件并手动触发自动完成功能。也许你可以用这样的东西“欺骗”自动完成：

$('.sometextbox').focus(function() 
   if ($('.sometextbox').val().length ==0)  
   //no text entered yet
   $('.sometextbox').val('  '); //insert 2 white spaces in order to trigger the autocomplete

);

【讨论】：

你的选项可以工作，但@Gijs 选项更干净，找到了我正在寻找的确切方法。谢谢！

你太客气了； @Gijs 的解决方案要好得多。不过还是谢谢！

【参考方案3】：

所有答案都是正确的。我添加这个是因为 minChars 在较新的版本中已被弃用。使用 minLength。 放 minLength : 0 您也可以考虑在文本字段旁边使用一个按钮，该按钮的作用类似于下拉菜单并切换所有可用选项。 快乐编码！

编辑 此外，由于您正在加载整个列表，因此您可以将延迟设为 0，从而覆盖您可能提到的现有延迟行为。

$('input#textboxid').autocomplete('search','','delay',0);