Блог

Я пытаюсь включить опцию поиска в раскрывающемся списке выбора в Angular 9. Я пытался использовать ‘NgxMatSelectSearch‘, а также использовать MDB Bootstrap, но, похоже, ни один из них не работает. Есть ли какой-либо другой способ добиться этого?

Я реализовал эту функциональность с помощью ‘Select2’

Установите приведенные ниже зависимости:

npm install select2 npm install jquery —сохранить

В Angular.json добавить

 "styles": [
       "node_modules/select2/dist/css/select2.min.css",
           ...
       ],
"scripts": [
       "node_modules/jquery/dist/jquery.min.js", 
       "node_modules/select2/dist/js/select2.min.js"
              ...
      ]
  

В файле Component.ts добавьте

 ...
declare let $: any;
...
export class AppComponent {
...
   
   ngOnInit() {
    
    $('.js-example-basic-single').select2();
    $('.js-example-basic-single').on("change", function(){
     alert($(this).val());
    });
  }
...
}
  

И, наконец, добавьте приведенный ниже код в app.component.html файл

 <select class="js-example-basic-single" name="state" style="width: 150px;">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>