data-live-search-style 数据属性在 bootstrap select js 中不起作用

Question

我已经使用 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>

当我写 te 时，它显示 Elite, Interp and test 而不是 test。

如果我写 te，它只显示 test。那么我应该在我的代码中更改什么？

Answer 1

此代码片段表明您的代码正在运行：

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

Answer 2

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

试试这个，它如你所愿。

Answer 3

我遇到了类似的问题。我的 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"

data-live-search-style 数据属性在 bootstrap select js 中不起作用

data-live-search-style data attribute is not working in bootstrap select js

html

bootstrap-select