data-live-search-style 数据属性在引导选择 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

这段代码 sn-p 表明您的代码正在运行：

<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

我遇到了类似的问题。对于每个搜索值，我对 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"

Answer 3

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

试试这个，效果如你所愿。