AngularJS UI Bootstrap Typeahead 未按预期工作答案

【问题标题】：AngularJS UI Bootstrap Typeahead not working as expectedAngularJS UI Bootstrap Typeahead 未按预期工作
【发布时间】：2016-05-06 00:52:49
【问题描述】：

我正在使用 Elasticsearch 和 AngularJS 构建一个小型搜索应用程序。我正在使用 AngularJS UI bootstrap typeahead 来实现自动完成，我正在使用 ES 的 edge_n_grams 和 highlight object 来 1) 生成建议和 2) 分别突出显示建议。 ES highlight 对象将建议包装在 HTML  标签中... 似乎导致我的设置方式出现一些问题。

1) 当我按 Enter 键而不是单击搜索按钮时 - 所发生的只是搜索词显示在  标签中，并且不执行搜索...search terms

2) 当我用鼠标选择一个建议时，同样的事情会发生。

搜索执行的唯一时间是当我输入查询并单击搜索按钮时...

这是我正在使用的搜索表单，我在表单元素和按钮上都有 ng-submit="search()"，不知道我哪里出错了......？

<form name="q" ng-submit="search()" class="navbar-form" id="results-search" role="search">
  <div class="input-group">
    <input type="text" name="q" ng-model="searchTerms" class="form-control input-md" placeholder="{{ searchTerms }}" id="search-input" uib-typeahead="query for query in getSuggestions($viewValue)" typeahead-on-select="search($item)">

      <div class="input-group-btn">
        <button type="submit" ng-submit="search()" class="btn btn-primary btn-md"><i class="fa fa-search fa-lg"></i></button>
        </div>
   </div>
</form>

我在 UI Bootstrap Typeahead 上做错了吗？

更多说明 所以基本上我要问的是如何从建议、选择和搜索中删除标签？

【问题讨论】：

标签： angularjs angular-ui-bootstrap

【解决方案1】：

Stackoverflow 中已经提出了类似的示例：Click here

【讨论】：

我收到了建议... drop 显示很好，更多的是正确格式化查询的问题 - 从建议中剥离标签
使用console.log并尝试找出当点击回车键并在鼠标中选择下拉菜单时会发生什么以及点击搜索按钮时会发生什么。
如果你能把你的代码放在 plunker 中，那么你的代码就会很容易查看和分析。