如何在 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
How can I use a select box with jQuery AutoComplete?
提问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 select
element 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 没有这个限制。
- 标记:能够即时添加新项目。
- 使用大型远程数据集:能够根据搜索词部分加载数据集。
- 大数据集的分页:当结果滚动到最后时,轻松支持加载更多页面。
- 模板:支持自定义渲染结果和选择。