Bootstrap selectpicker MVC dropdown livesearch

Question

I am quite sure my problem is something to do with the script reference.

I have added it to my bundles

bundles.Add(new ScriptBundle("~/bundles/bootstrap-select").Include(
    "~/Scripts/bootstrap-select.js",
    "~/Scripts/bootstrap-select.min.js"));

here is my views code:

<script type="text/javascript">
    $(document).ready(function () {
        $('.selectpicker').selectpicker({
            liveSearch: true,
            showSubtext: true
        });
    });

Html form:

@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
    @Html.LabelFor(model => model.SagId, "SagId", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownListFor(x => x.SagId,(IEnumerable<SelectListItem>)ViewBag.SagId,
            new
            {
                @class = "form-control selectpicker",
                data_show_subtext = "true",
                data_live_search = "true"
            })
        @Html.ValidationMessageFor(model => model.SagId, "", new { @class = "text-danger" })
    </div>
</div>

I get the list from my view bag, that works fine. But I cannot seem to fix this problem.

Update: tried to manually add referrences in the view. now the dropbox is completly gone and i get theese errors:

Uncaught TypeError: Cannot read property 'valHooks' of undefined
at bootstrap-select.min.js:7
at bootstrap-select.min.js:8
at bootstrap-select.min.js:7
at bootstrap-select.min.js:7

Create:78 Uncaught ReferenceError: $ is not defined at Create:78

i would like for it to look something like this: http://jsfiddle.net/codeandcloud/a5r2vyu2/1/ — Tyson Hugon, Mar 10 '17 at 10:59
You haven't included any style information, the code in this question and your problem are totally un-related — Liam, Mar 10 '17 at 11:16
@Liam i have just added some more now, my issue is that i can't apply the "selectpicker" style to my DropDownBox. — Tyson Hugon, Mar 10 '17 at 11:19
that's a different problem again. your question is not clear and is lacking a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) — Liam, Mar 10 '17 at 11:20

score 1 · Answer 1 · answered Mar 10 '17 at 18:45

First, you only want to add one of the references; start with just the JS; when built in release mode, it will find the min.js.

bundles.Add(new ScriptBundle("~/bundles/bootstrap-select").Include(
    "~/Scripts/bootstrap-select.js"));

This was registering the same script, which will have these sorts of problems.

Secondly, it looks like this bundle is defined before wherever you have JQuery defined. So the $ is not defined is likely because bootstrap select script, and usage, has to be after the JQuery initialization.

Bootstrap selectpicker MVC dropdown livesearch

1 Answers1