Data-live-search not working on my DropDownList-CodePudding

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

CodePudding user response：

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/[email protected]/dist/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">