如何通过按字母跳入下拉 ul li 大列表？答案

【问题标题】：How to jump in a dropdown ul li big list by pressing a letter?如何通过按字母跳入下拉 ul li 大列表？
【发布时间】：2018-03-17 22:31:27
【问题描述】：

在 Rails 3 应用程序中，我正在使用 twitter 引导程序。我有一个视图，我正在生成一个大的下拉列表，允许人们选择一个名字。单击名称时使用ajax，该名称出现在另一个列表中，并且页面刷新不会关闭下拉菜单。

该列表包含至少 500 个名称。在里面寻找名字并不难，但为了改善用户体验，我正在尝试制作一种捷径。我想在按下字母字符时在下拉列表中跳转。

如果我使用：

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

列表很重要，您可以按“z”然后进入菜单末尾。但是选择/选项方法更适合表单，我必须放置一个验证按钮来发送数据，我失去了我的 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>

【问题讨论】：

标签： html ruby-on-rails twitter-bootstrap

【解决方案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.
});

这样您就无需在列表中插入链接了。

【讨论】：

感谢您的回答，我将尝试使用 select2（令人印象深刻）。我也看到他们的远程选项似乎很容易实现。
最后我快速尝试选择。生成的列表和搜索行为很完美，但生成的
好吧，在这种情况下，我认为最好只创建一个带有标签和值的普通选择，然后在选择更改事件上触发 ajax 调用。
但是您的第一个建议对应用程序的用户来说确实很好。我将花一些时间在 change 事件上使用 ajax 调用来实现 select2。我正在阅读他们的文档。我还找到了一个可能有助于实现 select2 的 youtube 教程 (www.youtube.com/watch?v=N9yvKdYYKqQ)。

【解决方案2】：

另一个（相当不错的）选项是使用预输入：https://twitter.github.io/typeahead.js/

受 twitter.com 的自动完成搜索功能的启发， typeahead.js 是一个灵活的 JavaScript 库，为构建强大的预输入。

typeahead.js 库由 2 个组件组成：建议引擎、Bloodhound 和 UI 视图 Typeahead。建议引擎负责计算给定查询的建议。用户界面 view 负责渲染建议和处理 DOM 互动。两个组件都可以单独使用，但使用时一起，它们可以提供丰富的预输入体验

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

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

【讨论】：