隐藏表单提交时的下拉列表

Question

我正在使用 Angular UI Bootstrap 中包含的 Typeahead 指令

那么，我经常发生的事情（特别是在连接速度较慢的情况下）我在搜索输入框中输入了一些东西......（提前输入触发）。然后我按回车键或点击提交...并且表单提交...但是 TypeAhead 的下拉菜单还是会显示！非常烦人，因为我在提交表单后隐藏了搜索表单，而下拉菜单只是漂浮在那里......

值得一提的是，当将下拉列表附加到正文时会发生这种情况

<form ng-submit="Ctrl.onSubmit()">
    <input
        id="fld-page-search"
        class="form-control input-lg"
        type="search"
        data-ng-model="Ctrl.searchTerm"
        placeholder="Search by ...."
        required
        data-ng-minlength="2"
        data-typeahead="item.name for item in Ctrl.typeahead($viewValue)"
        data-typeahead-min-length="2"
        data-typeahead-append-to-body="true"
        data-typeahead-on-select="Ctrl.openFund($item)"
        data-typeahead-focus-first="false"
        data-typeahead-template-url="/static/tpl/fund-discovery-typeahead.html"
    >

我想在我的onSubmit方法中有一个选项来隐藏typeahead的下拉列表（并取消所有请求队列）

我试过做

var $typeaheadList = $('#' + $searchInput.attr('aria-owns'));
$typeaheadList.hide();

这确实起到了作用，但是当我再次打开/展开搜索框并尝试再次使用搜索输入类型时，列表保持隐藏状态

Answer 1

我找到了一个丑陋的解决方案，它似乎正在工作，但我当然不喜欢它。

$typeaheadList.hide();
$searchInput.one('keyup', function(){
    $typeaheadList.show();
});

Answer 2

我发现了没有纯 Jquery 的丑陋工作解决方案。因此，当我需要关闭 tupeahead 时，您可以简单地从 typeahead 输入中失去焦点，然后将其返回。我使用此代码：

               //this is close for typeahead control
                $timeout(function () {
                    angular.element(element[0].querySelector('.glyphicon-refresh')).click();
                });
                //here is server call, or other action
                $timeout(function () {
                    angular.element(element[0].querySelector('input[type=text]')).select();
                });

我把这段代码放到我的 cusom 指令中，它包装了 angular-ui-typeahead。希望这会有所帮助。