让 data-live-search 解释与正常 space ( ) 相同
Have data-live-search interpret the same as normal space ( )
我正在使用数据实时搜索解决 bootstrap-select and am running into a problem where the blank spaces used in my options are not interpreted the same as a normal space. I would like to have replaced by a normal blank space. Was wondering if there is any easy way to fix this? 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 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</body>
我认为没有配置选项可以实现您的目标。
可能最简单的方法是使用 jQuery:
$(document).ready(function() {
$(".selectpicker option").each(function(index) {
var txt = $(this).html().replace(" ", " ");
$(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 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
我正在使用数据实时搜索解决 bootstrap-select and am running into a problem where the blank spaces used in my options are not interpreted the same as a normal space. I would like to have replaced by a normal blank space. Was wondering if there is any easy way to fix this? 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 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</body>
我认为没有配置选项可以实现您的目标。
可能最简单的方法是使用 jQuery:
$(document).ready(function() {
$(".selectpicker option").each(function(index) {
var txt = $(this).html().replace(" ", " ");
$(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 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>