Question

在rails 3 app我使用twitter bootstrap。我有一个视图，我正在生成一个大的下拉列表，允许人们选择一个名称。单击名称时使用ajax，名称将显示在另一个列表中，并且页面刷新不会关闭下拉菜单。

该列表至少包含500个名称。在内部寻找一个名字并不难改善用户体验我试图做出一种捷径。我想按下字母char时在下拉列表中跳转。

如果我使用：

<select>
 <option> name </option>
 <option> ... </option>
</select>

列表诀窍，您可以按“z”然后落在菜单的末尾。但是select / option方法更适合表单，我必须放置一个验证按钮来发送数据，并且我放弃了我的ajax优势。

我使用jquery尝试使用自动完成方法，但我的用户告诉我，如果他们不确定名称的拼写，他们更喜欢列表。

我正在研究组合框以改善下拉行为，但我认为它会像选择列表一样，我必须制作一个验证按钮。我不希望我的用户重复打开列表，单击，发送，刷新重新打开列表...

有没有办法通过按一个字母来跳转列表？对于必须在长列表中找到名称的用户，您有什么建议，我该如何改进他们的导航？

由于

编辑：

实际的下拉列表如下所示：

<ul class="dropdown-menu">
  <% participants.each do |p| %>
    <li>
      <%= link_to "#{p.first-name} #{p.last-name}",
                  activity_activity_items_path(
                    @activity,
                    activity_item:{
                                    activity_itemable_id: p.id,
                                    activity_itemable_type: p.class.name
                                    } ),
                  method: :post,
                  remote: true %>
    </li>
  <% end %>
</ul>

Answer 1

我建议您使用具有所有这些功能的jquery插件，而不是从头开始创建。像chosen插件或select2之类的东西应该可以胜任，因为他们有关于选择itens，搜索功能和内容的事件。

选择：https://github.com/harvesthq/chosen
选择2：http://ivaynberg.github.io/select2/

更新：

尝试正常创建选择，并在选项更改时触发ajax调用。

$('#your_select').change(function() {
  // Make your ajax call here, update what you want.
});

这样您就可以不再需要在列表中插入链接。

Answer 2

另一个（非常好）选项是使用typeahead：https://twitter.github.io/typeahead.js/

受twitter.com自动完成搜索功能的启发，   typeahead.js   是一个灵活的JavaScript库，为您提供了坚实的基础   建立强大的先行者。

typeahead.js库由2个组件组成：建议   引擎，Bloodhound和UI视图，Typeahead。建议引擎   负责计算给定查询的建议。用户界面   view负责呈现建议和处理DOM   互动。两种组分可以单独使用，但在使用时   在一起，他们可以提供丰富的先行经验

由于您正在进行单一选择并希望能够搜索选项，因此我认为这是您最好的选择。

设置起来非常简单......只需绑定您的名称数组并进行配置。

如何通过按一个字母跳进下拉列表ul li大列表？

2 个答案: