让 data-live-search 解释与普通空间 ( ) 相同答案

【问题标题】：Have data-live-search interpret   the same as normal space ( )让 data-live-search 解释与普通空间 ( ) 相同
【发布时间】：2018-06-17 15:07:59
【问题描述】：

我正在使用带有bootstrap-select 的数据实时搜索，并且遇到了一个问题，即我的选项中使用的空格与普通空格的解释不同。我想用一个普通的空格代替。想知道是否有任何简单的方法可以解决这个问题？ Here is a JSFiddle 的问题。代码也在下面（根据 SO 规则）。

<body>
 <div class="container" style="width: auto;">
  <select class="selectpicker" title='Choose one of the following...' data-live-search="true">
        <option>Option&nbsp;1</option>
        <option>Option&nbsp;2</option>
        <option>Option&nbsp;3</option>
  </select>
  </div>
</body>

【问题讨论】：

标签： ruby-on-rails search ascii bootstrap-select

【解决方案1】：

我认为没有配置选项可以实现您的目标。

可能最简单的方法是使用 jQuery：

$(document).ready(function() {
  $(".selectpicker option").each(function(index) {
    var txt = $(this).html().replace("&nbsp;", " ");
    $(this).html(txt);
    console.log(index + ": ", this);
  });
  $('.selectpicker').selectpicker('refresh');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<label>Select live search</label>
<select class="selectpicker" title='Choose one of the following...' data-live-search="true">
      <option>Option&nbsp;1</option>
      <option>Option&nbsp;2</option>
      <option>Option&nbsp;3</option>
      <option>Option 4</option>
</select>

【讨论】：

我正在使用 Rails，所以我觉得可能有比使用更多 Javascript 更简单的方法。正在考虑使用gsub。这是一个很好的答案，但我正在寻找一种方法来替换它。