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

html bootstrap-select
Nisarg Bhavsar picture Nisarg Bhavsar · Nov 23, 2016 · Viewed 59.7k times · Source

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?

Answer

Bob Dust picture Bob Dust · Nov 23, 2016

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>

Related questions

Bootstrap 4 multiselect dropdown

I read on many forums that the problem of select and multiselect has been resolved after the beta version of bootstrap 4. Unfortunately I am unable to display the multiselect as in (bootstrap 3) in (bootstrap 4). Bootstrap 3 Snippet Bootstrap 4 Snippet $('select').selectpicker(); &…

Read More
Show title in Bootstrap-Select without empty element

In Bootstrap-Select, how can I prevent the first selected item from being shown in the title. Alternatively, how can I hide an empty first item from the list of drop down options In HTML, the <select> element will …

Read More
bootstrap-select get the value and the text

I try to do a selections on companies to add to a group, and after that to do the connection in database. I'm kind of blocked on the "html" code. I work in Laravel <select id="selectCmp" class="selectpicker" …

Read More