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

Question

我目前正在支持Angular的Servicenow Service门户中工作>

我能够使用引导程序创建搜索框，如下所示：

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

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

如何在选择框中设置所有国家/地区名称？

我目前正在Servicenow Service门户中工作，该门户支持Angular，我可以使用引导程序来创建搜索框，如下所示：

Answer 1

在服务器脚本中，设置全局data对象属性，然后可以在HTML中引用该属性。

Answer 2

尽管我是一个反应灵敏的人，但据我所知，可以用这种方式完成。因此，假设您拥有国家/地区数组。

Answer 3

这是修复程序的我的版本，我了解您需要使用常规的选择标记，因此我提供了不使用任何自定义选择插件的解决方案，请让我知道这是否可以解决您的问题。

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>