Как построить динамическое c окно поиска, используя Bootstrap

Question

В настоящее время я работаю на сервисном портале Servicenow, где он поддерживает Angular

. Я могу создать поле поиска, используя bootstrap, как показано ниже:

 <select class="mdb-select md-form" searchable="Search here..">
  <option value="" disabled selected>Choose your country</option>
  <option value="1">USA</option>
  <option value="2">Germany</option>
  <option value="3">France</option>
  <option value="3">Poland</option>
  <option value="3">Japan</option>
</select>

Это дает правильный результат. Но с сервера я извлекаю названия стран, которые я хочу настроить динамически при каждом обновлении, результат может меняться. Я могу получить названия стран, как показано ниже в массиве, таком как: Таиланд, Китай, Индия, Сингапур.

Как я могу установить над всеми названиями стран в поле выбора?

Answer 1

В вашем серверном скрипте задайте глобальное data свойство объекта, на которое вы затем можете ссылаться в HTML.

Серверный скрипт :

// perform a query to get your countries array: 
var countries = ["Thailand", "China", "India", "Singapore"];

data.countries = countries.map(function(text, i) {
  return {value: i+1, text: text};
}); 

Затем в вашем HTML для итерации данных и динамического создания тегов <option> вы можете использовать ng-options в своем <select>

HTML шаблоне :

<select class="mdb-select md-form" 
  ng-options="obj.text for obj in data.countries track by obj.value"
  ng-model="c.data.selectedCountry" searchable="Search here..">
    <option value="" disabled selected>Choose your country</option>
</select>

Выше указанное значение отображается в переменной c.data.selectedCountry, определенной в вашем клиентском скрипте.

Клиентский скрипт :

function() {
  /* widget controller */
  var c = this;
  c.data.selectedCountry = ""; // changes based on value selected in dropdown

  // other code...
}

Answer 2

Это моя версия исправления, я понимаю, что вам нужно использовать обычный тег выбора, поэтому я предоставил решение без использования какого-либо специального плагина выбора, пожалуйста, дайте мне знать, если это решит вашу проблему.

HTML Код:

<select class="mdb-select md-form" id="test" searchable="Search here.." multiple #selectBox (change)="onChange($event.target)">
  <option value="" disabled>Choose your country</option>
  <option 
    *ngFor="let item of countries" 
    [value]="item.id" 
    [selected]="userCountries.indexOf(item.id) > -1">{{item.name}}</option>
</select>

Код компонента:

import { Component, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  userCountries = [
    1,2,3,4
  ];
  countries = [
    {
      name: 'USA',
      id: 1,
    },
    {
      name: 'Germany',
      id: 2,
    },
    {
      name: 'France',
      id: 3,
    },
    {
      name: 'Poland',
      id: 4,
    },
    {
      name: 'Japan',
      id: 5,
    },
  ];

  onChange(selectCtrl) {
    const values = Object.keys(selectCtrl['selectedOptions']).map(key => selectCtrl['selectedOptions'][key]);
    const output = values.map((item: HTMLOptionElement) => item.value);
    this.userCountries = values.map((item: HTMLOptionElement) => +item.value);
    console.log(this.userCountries);
  }
}

Пример стека блиц: Пример стекаблица

Answer 3

Хотя я реагирующий парень, но, насколько я знаю, это можно сделать таким образом. Допустим, у вас есть массив стран.

$scope.countries = [{
  id: 1,
  name: 'USA'
}, 
{
  id: 2,
  name: 'France',
}];

<select class="selectpicker" 
 ng-options="country as country.name for country in countries track by 
 country.id" 
 ng-model="selected">
</select>

Answer 4

Возможно, вы захотите использовать библиотеку bootstrap-select, демо-код как показано ниже

<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

Вы можете проверить больше образцов здесь .

Надеюсь, это поможет!