GUI替代< select>当你有很多选择 [英] GUI alternative to <select> when you have a lot of options

查看:90
本文介绍了GUI替代< select>当你有很多选择的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

< select> 可能适合选择3-15个简单项目,但如何处理15-100 +?

A <select> might be good for choosing between 3-15 simple items, but how do you deal with 15-100+?

最简单的选项就是只有一个简单的< select> 有很多< option> s,但它不是很方便用户。有很多滚动,它可能很难找到您要找的选项。

The simplest option would be to just have a plain <select> with a lot of <option>s, but it's not very user friendly. There's a lot of scrolling and it might be hard to find the option you are looking for. The benefit is that you can (maybe with scrolling) see all the options you have.

更高级的选项可能会有一个文字字段与自动完成。用户输入一个或两个字母,并且搜索结果返回您选择。它可以更容易找到您要找的选项 - 如果你知道你是寻找。缺点是用户无法看到所有选项。

A more advanced option would be to have a text field with autocomplete. A user types in a letter or two, and search results come back which you choose from. It makes it easier to find the option you are looking for - if you know what you are looking for. The drawback is that the user can't see all the options.

一个更高级的选项会构建一个并选择默认显示X项,但允许您进行搜索的小部件。这种方法的一个优点是,我可以允许搜索多个属性,而不只是要选择的项目的名称。

An even more advanced option would be to build a "search, list and choose" widget which defaults to show X items, but allows you to search. An advantage of this approach is that I can allow search on multiple attributes and not just the name of the item which is to be selected.


  1. 您在
    中部署了哪些解决方案?

  2. 是否有一个jQuery插件? li>
  1. What solutions have you deployed in these situations?
  2. Is there a jQuery plugin I should know about?


推荐答案


  1. 我喜欢使用的解决方案是为用户提供选择包含所有选项的列表(应该通过它查看),但提供一个自动完成功能,可以在列表中输入时自动搜索列表。排序第一个和第二个选项的混合。

  2. 至于插件,有一个数字(以及文档,将导致更多),可以帮助你这里:
  1. The solution that I like to use is provide the user a select list with all the options (should they want to look through it), but provide an autocomplete feature which searches through the list as they type into it. Sort of a hybrid of your first and second options.
  2. As for plug-ins, there are a number out there (as well as documentation which will lead you to more) that can help you here:
    • http://plugins.jquery.com/project/jquery-select-autocomplete
    • http://docs.jquery.com/Plugins/Autocomplete/autocomplete
    • http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/

这篇关于GUI替代&lt; select&gt;当你有很多选择的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆