Как очистить выпадающий список uib-typeahead в angularjs - PullRequest
Новая
       36

Как очистить выпадающий список uib-typeahead в angularjs

0 голосов
/ 24 марта 2020

Я использовал uib-typeahead. Я делаю вызов API, когда набираю что-то в uib-typeahead.

Я добавил значок отмены рядом с моим текстовым полем 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
    };

1 Ответ

1 голос
/ 25 марта 2020

Я только начал работать над аналогичной проблемой - скрыть раскрывающийся список.

Предполагая, что ваш входной элемент обернут в элемент формы, который содержит идентификатор:

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, которые содержат класс выпадающего меню. Если у вас есть несколько dropDown uib-typeahead, на них можно ссылаться по их порядку в HTML.

...