htmlasp.net-mvcbootstrap-selectpicker

Data-live-search not working on my DropDownList


i found here the working code: data-live-search-style data attribute is not working in bootstrap select js

It's work perfectly in my razor view:

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

So, i try to do the same (many times) on my dropDown list, but it never work:

@Html.DropDownList("ID", Model.TrainList.Select(obj => new SelectListItem() { Text = obj.trainDescription, Value = obj.ID.ToString() }), "select", new { @class = "data-live-search=true data-live-search-style=startsWith class=selectpicker" })

Does anyone know how I have to change the code of my drop-down menu to make the search work?

This is the clean code of my working dropDownList:

@Html.DropDownList("ID", Model.TrainList.Select(obj => new SelectListItem() { Text = obj.trainDescription, Value = obj.ID.ToString() }), "select")

Thanks.


Solution

  • The problem was that you are wrongly implementing the HTML attribute and class value to the HtmlHelper.

    It should be:

    @Html.DropDownList(
        "ID", 
        Model.TrainList.Select(obj => new SelectListItem() { Text = obj.trainDescription, Value = obj.ID.ToString() }), 
        "select", 
        new 
        { 
            @class = "selectpicker",
            data_live_search = "true", 
            data_live_search_style = "startsWith"
        })
    

    Demo @ .NET Fiddle


    Note that your Bootstrap resource links seem broken, I replace them with:

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">