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中不起作用

3 个答案: