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

Question

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

Answer 1

我剛剛開始研究一個類似的問題 - 隱藏下拉菜單。

假設您的 input 元素包含在一個包含 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 在具有“下拉菜單”類的無序列表中創建下拉菜單。

您可以在函數中訪問下拉菜單樣式：

JS

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

變量 dropDown 返回包含下拉菜單類的所有 UL 元素的數組。 如果您有多個 uib-typeahead dropDown，則可以按它們在 HTML 中的順序進行引用。