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

Question

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?

You should change nothing. Your markups work exactly what you're expecting. Perhaps, you should check dependent CSS, JS. — Bob Dust, Nov 23 '16 at 06:32
@BobDust I need to show first `test` because I have written `te`. — Nisarg Bhavsar, Nov 23 '16 at 06:34

score 14 · Accepted Answer · edited Nov 04 '21 at 00:28

14

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>

edited Nov 04 '21 at 00:28

Asef Hossini

655
8
11

answered Nov 23 '16 at 06:38

Bob Dust

2,370
1
17
13

1

I think my bootstrap jQuery version was old that's why it won't work before. Now, its working Thank you so much. – Nisarg Bhavsar Nov 23 '16 at 06:48
My issue solved with, I overwrite my _bootstrap.min.css_ with given CDN and filter is working now. – SPnL Dec 04 '19 at 04:00
congrats @SPnL :D – Bob Dust Dec 05 '19 at 12:26

score 2 · Answer 2 · answered Feb 21 '18 at 10:12

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

Thank you. Nice answer but please explain this so we can understand why try this piece of code as this is same as above — SPnL, Dec 03 '19 at 05:01

score 0 · Answer 3 · answered Sep 17 '18 at 23:57

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"

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

3 Answers3

Linked