没有搜索回车键

Question

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

假设我要搜索名叫汤姆的演员。我在搜索输入中输入 "tom"，然后出现 5 个建议 - 很好。但是，如果我所做的只是按键盘上的 Enter，它不会让我只搜索 "tom"。它会自动选择下拉列表中的第一个建议。如果我只单击提交按钮，它将只搜索 "tom"。我的表单标记如下 - 我哪里出错了？

我想让我的用户能够搜索他们输入的查询（当他们按 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

它会自动 select 第一个结果。所以当你按下回车键时，它已经关注了第一个结果。您可以将 angular ui typeahead 配置为不自动 select 第一个结果，如下所示：

typeahead-focus-first="false"

有关详细信息，请参阅他们的文档：

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

没有搜索回车键

No search on Enter key

angularjs

angular-ui-typeahead