Question

我正在使用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>

Answer 1

我认为没有配置来实现你的目标。

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

＆＃13;

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

＆＃13;

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

＆＃13;

数据实时搜索解释与普通空间相同（）

1 个答案: