Angular UI Typeahead - 手动清除/隐藏下拉菜单答案

【问题标题】：Angular UI Typeahead - Manually clear/hide dropdownAngular UI Typeahead - 手动清除/隐藏下拉菜单
【发布时间】：2014-12-30 09:21:21
【问题描述】：

我的用例相当简单。我将 typeahead 指令用作搜索框，并希望在按 Enter 时手动清除/隐藏其下拉列表（并且您没有选择任何内容） - 就像 Google 所做的那样。

附：清除下拉菜单时，我的搜索框中的文本需要保持完整

【问题讨论】：

标签： javascript angularjs angular-ui-bootstrap angular-ui-typeahead

【解决方案1】：

您必须将 typeahead 元素包装在一个表单中。如果您这样做，则 typeahead 将提交表单。如果你添加一个 ng-submit 指令，你可以把你想要的行为放在那里。

<form ng-submit="search(query)">
  <input type="text" ng-model="query"
     typeahead="foo as foo for foo in bars"
     typeahead-on-select="onSelect($item)"
     typeahead-focus-first="false"
     />
</form>

使用 0.12.0 版本的 angular-bootstrap 进行测试。请参阅相关问题中的 cmets：https://github.com/angular-ui/bootstrap/pull/2916:

预期的行为是当从输入中按回车键时提交外部表单并且没有任何焦点

【讨论】：

@Markus 当我想使用选项卡而不是输入并想隐藏下拉菜单时，您知道解决方案吗？我正在使用 focus-first=false 和 typeahead-editable=true。

【解决方案2】：

只需执行以下代码即可关闭 UI Typeahead 列表/下拉列表，除非它不会损害您的应用程序：

$('body').click();

【讨论】：