Html data-live-search-style 数据属性在引导选择 js 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40757224/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
data-live-search-style data attribute is not working in bootstrap select js
提问by Nisarg Bhavsar
I have used bootstrap-select.min.jsto search in dropdown. But it gives wrong result. My html code looks like below :
我曾经bootstrap-select.min.js在下拉列表中搜索。但它给出了错误的结果。我的 html 代码如下所示：
<select data-live-search="true" data-live-search-style="startsWith" class="selectpicker">
<option value="4444">4444</option>
<option value="Fedex">Fedex</option>
<option value="Elite">Elite</option>
<option value="Interp">Interp</option>
<option value="Test">Test</option>
</select>
When I write tethan it show Elite, Interp and testinstead of test.
当我写te比它显示Elite, Interp and test而不是test.
If I write tethan it show only test. SO what should I have to change in my code?
如果我写te比它只显示test。所以我应该在我的代码中改变什么？
回答by Bob Dust
This code snippet shows that your code is working:
此代码段显示您的代码正在运行：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<select data-live-search="true" data-live-search-style="startsWith" class="selectpicker">
<option value="4444">4444</option>
<option value="Fedex">Fedex</option>
<option value="Elite">Elite</option>
<option value="Interp">Interp</option>
<option value="Test">Test</option>
</select>回答by Anil Maharjan
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<select data-live-search="true" class="selectpicker">
<option value="4444">4444</option>
<option value="Fedex">Fedex</option>
<option value="Elite">Elite</option>
<option value="Interp">Interp</option>
<option value="Test">Test</option>
</select>Try this, it works as you expected.
试试这个，它按你的预期工作。
回答by Tomczek
I had a similar problem. My search-result for liveSearchStyle "startsWith" was always empty for each search-value. After a while I've figured out, that this was an mapping issue. This is how it worked for me:
我有一个类似的问题。对于每个搜索值，我对 liveSearchStyle "startsWith" 的搜索结果始终为空。一段时间后，我发现这是一个映射问题。这对我来说是这样的：
<abp-select
picker-options.bind="{ liveSearch: true, dropupAuto: false, noneSelectedText: '', liveSearchStyle: 'startsWith' }"
collection.bind="items"
selected-item.bind="selectedItem"
data-mapping-structure.bind="{ option: 'standardDisplayText', content: 'standardDisplayText' }"
object-key="key">
</abp-select>
export interface IItem {
key: string;
value: string;
displayText: string;
}
public items: IItem[];
public selectedItem: IItem;
items = [
{ key: '121', value: 'hello', displayText: '121 - hello' },
{ key: '112', value: 'world', displayText: '112 - world' },
];
search for: "12"
result: "121 - hello"
