How to build dynamic search box using Bootstrap

Question

I am currently working in Servicenow Service portal where it support Angular

I am able to create a Search box using bootstrap as shown below:

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

This gives the correct result. But from the server I am pulling country names which I want set up dynamically upon every update the result may change. I am able to receive a country names as shown below in an array like: Thailand, China, India, Singapore.

How can I set above all the country names in the select box?

Answer 1

In your server script, set the global data object property which you can then reference in your HTML.

Server Script:

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

Then, in your HTML, to iterate the data and create <option> tags dynamically, you can use ng-options in your <select>

HTML Template:

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

Above, the value selected is reflected to the c.data.selectedCountry variable defined on in your client script.

Client Script:

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

  // other code...
}

Answer 2

Although I am a react guy but as far as I know it can be done in this way. So lets say you have the countries array.

$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 3

This is my version of the fix, I understand you need to use a normal select tag, so I have provided a solution without using any custom select plugin, please let me know if this fixes your issue.

HTML Code:

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

Component code:

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

Stack blitz example: Stackblitz example

Answer 4

You may want to use library bootstrap-select, the demo code as bellow

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

You can check more sample here.

Hope this helps!