Question

我刚刚使用AngularJS和Elasticsearch为电影构建了一个小型搜索应用程序。我使用AngularJS UI Bootstrap Typeahead进行自动完成，并在测试中发现了一些关于用户交互的内容。

说我想搜索名为Tom的演员。我输入＆＃34; tom＆＃34;在搜索输入和5个建议出现 - 很好。然而，它不会让我只是搜索＆＃34; tom＆＃34;如果我只是按键盘上的Enter键。它会自动选择下拉列表中的第一个建议。它只会搜索＆＃34; tom＆＃34;如果我只是点击提交按钮。我的表单标记在下面 - 我哪里错了？

我想让我的用户能够搜索他们输入的查询（按Enter键时），而不仅限于提供的建议......

<div class="col-sm-3 col-md-6 pull-left" style="border: 1px solid red;"><form name="q" ng-submit="vm.search()" class="navbar-form" role="search">
<div class="input-group input-group-md">
  <input type="text" ng-model="vm.searchTerms" class="form-control input-md" placeholder="{{ vm.searchTerms }}" name="q" typeahead-show-hint="true" uib-typeahead="query for query in vm.getSuggestions($viewValue)" typeahead-on-select="vm.search($item)">

  <span class="input-group-btn">
    <button class="btn btn-primary btn-md" type="submit" id="results-search-btn" ng-submit="vm.search()"><i class="fa fa-search fa-lg"></i>
    </button>
  </span>
</div>

Answer 1

自动选择第一个结果。因此，当您按Enter键时，它已经专注于第一个结果。您可以将角度ui预先配置为不自动选择第一个结果，如下所示：

typeahead-focus-first="false"

请参阅他们的文档以获取更多信息：

https://angular-ui.github.io/bootstrap/#/typeahead

没有搜索Enter键

1 个答案: