如何使用 Bootstrap 构建动态搜索框

Question

我目前在支持 Angular

的 Servicenow 服务门户工作

我可以使用 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>

这给出了正确的结果。但是我从服务器上提取我想在每次更新时动态设置的国家名称，结果可能会改变。我能够在数组中收到如下所示的国家/地区名称：泰国、中国、印度、新加坡。

如何在 select 框中设置所有国家名称？

Answer 1

您可能需要使用库 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>

您可以查看更多样本here。

希望对您有所帮助！

Answer 2

虽然我是一个反应派，但据我所知可以通过这种方式完成。所以假设你有国家数组。

$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

在您的服务器脚本中，设置全局 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> 标签，您可以在 <select>

中使用 ng-options

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 4

这是我的修复版本，我知道你需要使用普通的 select 标签，所以我提供了一个不使用任何自定义 select 插件的解决方案，如果有的话请告诉我这解决了你的问题。

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

堆栈闪电战示例：Stackblitz example

如何使用 Bootstrap 构建动态搜索框

How to build dynamic search box using Bootstrap

html

css

angularjs

servicenow

angular-ui-bootstrap