如何在 jQuery AutoComplete 中使用选择框?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7717853/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 00:12:14  来源:igfitidea点击:

How can I use a select box with jQuery AutoComplete?

jqueryjquery-ui

提问by AKWF

Right now I have my Autocomplete widget in a text box. Ideally, it would be a Select box, but I can't figure out how to let somebody type in a select box.

现在我在文本框中有我的自动完成小部件。理想情况下,它是一个选择框,但我不知道如何让某人输入一个选择框。

So I am relegated to having a text box and a hidden box. The hidden box should get updated with the id of what displays in the text box.

所以我被降级为有一个文本框和一个隐藏框。隐藏框应该使用文本框中显示内容的 id 进行更新。

I am pretty new to jQuery, at least on an in-depth level like this. Am I making this harder than I need to? I definitely need autocomplete, because there are potentially hundreds of thousands of possible values.

我对 jQuery 还是很陌生,至少在这样的深入层面上是这样。我是否让这比我需要的更难?我绝对需要自动完成,因为可能有数十万个可能的值。

采纳答案by Andrew Whitaker

There is a great exampleof precisely this on the jQueryUI demo page for autocomplete. It actually uses a selectelement as the backing store.

在用于自动完成的 jQueryUI 演示页面上有一个很好的例子。它实际上使用一个select元素作为后备存储。

You could easily modify this to use a remote data source. If you need the source to be remote, let me know and I can provide an example.

您可以轻松修改它以使用远程数据源。如果您需要远程源,请告诉我,我可以提供一个示例。

回答by Joseph Silber

You should look into the jQuery plugin called chosen.
I think it's the best jQuery plugin written in the past year (or more).

您应该查看名为 .js 的 jQuery 插件chosen
我认为这是过去一年(或更长时间)编写的最好的 jQuery 插件。

Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors.

Chosen 是一个 JavaScript 插件,它使长而笨重的选择框更加用户友好。它目前有 jQuery 和 Prototype 两种版本。

回答by Micha? Powaga

There is a very good alternative for "chosen" - "Select2" (jQuery only).

"chosen" 有一个很好的替代方案 - "Select2" (jQuery only)

"Select2" use cases

  • Enhancing native selects with search.
  • Enhancing native selects with a better multi-select interface.
  • Loading data from JavaScript: easily load items via ajax and have them searchable.
  • Nesting optgroups: native selects only support one level of nested. Select2 does not have this restriction.
  • Tagging: ability to add new items on the fly.
  • Working with large, remote datasets: ability to partially load a dataset based on the search term.
  • Paging of large datasets: easy support for loading more pages when the results are scrolled to the end.
  • Templating: support for custom rendering of results and selections.

“Select2”用例

  • 通过搜索增强本机选择。
  • 使用更好的多选界面增强本机选择。
  • 从 JavaScript 加载数据:通过 ajax 轻松加载项目并使其可搜索。
  • Nesting optgroups:本机选择仅支持一级嵌套。Select2 没有这个限制。
  • 标记:能够即时添加新项目。
  • 使用大型远程数据集:能够根据搜索词部分加载数据集。
  • 大数据集的分页:当结果滚动到最后时,轻松支持加载更多页面。
  • 模板:支持自定义渲染结果和选择。