如何在angularjs中清除uib-typeahead下拉列表答案

【问题标题】：How to clear uib-typeahead dropdown list in angularjs如何在angularjs中清除uib-typeahead下拉列表
【发布时间】：2020-07-05 01:32:24
【问题描述】：

我使用 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>

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

【问题讨论】：

标签： javascript html angularjs angular-ui-bootstrap uib

【解决方案1】：

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

假设您的输入元素被包裹在一个包含 id 的表单元素中：

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 在具有“下拉菜单”类的无序列表中创建下拉菜单。

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


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

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

【讨论】：