0

在 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>
4

2 回答 2

1

我建议您使用具有所有这些功能的 jquery 插件，而不是从头开始创建。chosen插件之类的东西或select2应该做的工作，因为他们有选择itens，搜索功能和东西的事件。

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

更新：

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

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

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

于 2013-08-15T11:38:29.317 回答
0

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

受 twitter.com 的自动完成搜索功能的启发，typeahead.js 是一个灵活的 JavaScript 库，为构建健壮的 typeaheads 提供了坚实的基础。

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

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

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

于 2018-03-16T22:00:02.050 回答