Question

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

所以，我经常发生什么事（特别是在较慢的连接上）我在搜索输入框中输入了一些内容...（打字输出）...然后我按回车键或点击提交...然后表单提交...但无论如何都要输入预先输入的下拉菜单！非常讨厌，因为我在提交表单后隐藏了搜索表单，而下拉列表就漂浮在那里......

值得一提的是，当附加下拉到身体时会发生这种情况

<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"
    >

我想在mySubmit方法中隐藏typeahead的下拉列表（并取消所有请求队列）

我试过

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

这样做了，但当我再次打开/展开搜索框并尝试再次使用搜索输入时，列表保持隐藏状态

Answer 1

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

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

Answer 2

我找到了没有纯Jquery的丑陋工作解决方案。因此，当我需要关闭tupeahead时，您可以简单地从先行输入中松开焦点，然后将其返回。我使用这段代码：

               //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。希望这会有所帮助。

隐藏表单提交下拉列表

2 个答案: