javascript - 如何清除angularjs中的uib-typeahead下拉列表

我使用uib-typeahead。在uib-typeahead中键入内容时，我正在进行api调用。

我在uib-typeahead文本框旁边添加了取消图标，以清除该文本和下拉值，当我单击该取消图标时，但是当我单击“取消”图标时，它仅清除uib-typeahead中的文本。下拉菜单不会清除。

单击取消图标时如何清除下拉菜单？

的HTML

<input class="form-control" type="text" ng-model="searchObject" placeholder="Search name"
     uib-typeahead="value as value.name for a in search($viewValue)"
          typeahead-on-select="onSelect($item, $model, $label)">
          
          <--!  This is Cancel button -->                    
          <a class="clear" ng-click="searchObject = null;">
              <span class="fa fa-times"></span>
          </a>

JS

$scope.search = function(val) {
        //Some API call and return Array Of Object
        return Array Of Object
    };

最佳答案

我刚刚开始处理类似的问题-隐藏下拉菜单。

假设您的输入元素包装在一个包含id的form元素中：

的HTML

<form name="test" id="test">
   <input class="form-control" type="text" ng-model="searchObject" placeholder="Search name" uib-typeahead="value as value.name for a in search($viewValue)"
      typeahead-on-select="onSelect($item, $model, $label)">

          <--!  This is Cancel button -->
          <a class="clear" ng-click="hideDropDown()">
              <span class="fa fa-times"></span>
          </a>
</form>

uib-typeahead在具有“ dropdown-menu”类的无序列表中创建下拉菜单。

您可以在函数中访问下拉菜单样式：

JS

$scope.hideDropDown = function() {
        var dropDown = document.getElementById("test").querySelectorAll("ul.dropdown-menu");
        dropDown[0].style.display = "none";
    };

变量dropDown返回包含dropdown-menu类的所有UL元素的数组。如果您有多个uib-typeahead dropDown，则可以通过HTML中的顺序来引用它们。