如何隐藏下拉md-autocomplete

Question

如何在选择项后隐藏AutoComplete下拉菜单我尝试了许多类型，但都没有成功，有人能帮我吗，非常感谢

<md-autocomplete  id="autocomplete"  st-search="campaign_name"
                            ng-disabled="Ctrlmain.isDisabled"
                            md-no-cache="true"
                            md-selected-item="Ctrlmain.selectedItem"
                            md-search-text="Ctrlmain.campaignname"
                            md-selected-item-change="Ctrlmain.filltextbox(item)"
                            md-items="item in Ctrlmain.getMatches(Ctrlmain.campaignname)  | unique:'campaign_name'"
                            md-item-text="item.campaign_name"
                            md-min-length="0"
                            placeholder="Search Campaign"
                            md-menu-class="autocomplete-custom-template">
                                <md-item-template>
                                    <span class="item-title">                                
                                        <span> {{item.campaign_name}} </span>
                                    </span>
                                </md-item-template>
                        </md-autocomplete>

Angularjs代码

filltextbox(st){ 
        var autoChild = document.getElementById('autocomplete').firstElementChild;
        console.log(autoChild)
        var el = angular.element(autoChild);
        console.log(el)
        el.scope().$mdAutocompleteCtrl.hidden = true;

       // return st;


      }

Answer 1

我发现在这些场景中，通常是另一个影响异步功能的$digest或DOM阻碍了标准close逻辑的工作。快速解决方法是尝试在$timeout之后关闭对话框。

如果您有其他异步进程在页面上运行，例如执行搜索查询，并且在搜索运行时将全屏加载器写入DOM，则可能有必要将$timeout延迟设置为比平常更大的值。

下面的代码片段尝试立即强制关闭，在超时后覆盖所有基础，我将其用于我的md-autocompletes，作为搜索输入，提供最佳匹配建议和搜索结果。

filltextbox(st){ 
        closeAutocomplete();
        $timeout(closeAutocomplete, 100);

    // return st;
}
closeAutocomplete () {
    var autoChild = document.getElementById('autocomplete').firstElementChild;
    var el = angular.element(autoChild);
    el.scope().$mdAutocompleteCtrl.hidden = true;
}

为了更好地衡量，我确保在页面上操作的其他异步函数也调用closeAutocomplete。您可以将immediate和$timeout逻辑封装到一个调用中，如下所示，它允许您传入一个变量延迟

closeAutocomplete (delay) {
    // declare function once, only one point to maintain
    var fn = function() {
        var autoChild = document.getElementById('autocomplete').firstElementChild;
        var el = angular.element(autoChild);
        el.scope().$mdAutocompleteCtrl.hidden = true;
    };

    fn(); // immediate
    if(!delay) delay = 100;
    $timeout(fn, delay);
}