data-live-search-style data attribute is not worki

问题:

I have used bootstrap-select.min.js to search in dropdown. But it gives wrong result. My html code looks like below :

<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 te than it show Elite, Interp and test instead of test.

If I write te than it show only test. SO what should I have to change in my code?

回答1:

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>

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

Try this, it works as you expected.

回答3:

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:

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