CODEWITHSUNDEEP
javascripthtmlangularjsangular-ui-bootstrapuib
chiranjiv
chiranjiv

Reputation: 81

How to clear uib-typeahead dropdown list in angularjs

I using uib-typeahead. I am making api call when type something in uib-typeahead.

I added cancel a icon next to my uib-typeahead text box to clear that text and dropdown values when I click on that cancel icon, but when I click on the cancel icon it only clears text from uib-typeahead. The dropdown does not clear.

How do I clear the dropdown when I click on the cancel icon?

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
    };

Upvotes: 0

Views: 328

Answers (1)

rtg
rtg

Reputation: 26

I just started working on a similar issue - hiding the dropdown.

Assuming your input element is wrapped in a form element that contains an 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 creates the dropdown menu in an unordered list with a class of "dropdown-menu."

You can access the dropdown menu style in a function:

JS


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

The variable dropDown returns an array of all UL elements that contain the dropdown-menu class. If you have more than one uib-typeahead dropDown, they can be referenced by their order in the HTML.

Upvotes: 1

Related Questions