Display list items on typing minimum 2 characters for ng-select

user_6637806 0
Viewed 1066

I am using ng-select for search in my project. I want the list to be displayed only when the user has typed more than 2 characters. I have tried search, change and open events of ng-select but I am not getting the actual term typed by the user. Any help is appreciated.

angular
1 Answers

The solution for this issue is to give Id for ng-select component by its labelForId property and get this as HTML element in the ts file. If you get value for this HTML element, this will be the term typed by user. And if the term has less than 2 letters, you have to close dropdown using close() event of ngSelect.

component.html file:

<ng-select #Selecter [multiple] = "true" typeToSearchText = "'Please type'" labelForId="ngSelectId" (keyup) = "openDropdown()" (open) = "openLocationsDropdown()"
[items] = "selectOptions"></ng-select>

component.ts file:

@ViewChild('Selecter') ngselect: NgSelectComponent;

openLocationsDropdown() {
         let element = (document.getElementById('ngSelectId') as HTMLInputElement);
             let component = this.ngSelect;
         let term = element.value;
         if (this.term.length < 2){
              component.close();
         }
         element.value = this.term;
  }
user_66378060
Related