Getting Bootstrap-Select searchable drop-down to work on Display/Editor Template ASP.NET MVC

Question

I am trying to utilize the live-search functionality exposed by the Bootstrap-Select plugin in an ASP.NET MVC application.

I have managed to get it to work, i.e the required drop-downs are searchable, but the only problem is I have placed the code to that in a script tag.

The drop-downs are part of a display template and if I use script tags it seems that the rest of the elements in the razor view cannot access the JavaScript functions required to load the correct data.

My question is two fold. Firstly, if I use script tags on a Partial View/Editor/Display template does it negate all other external .js files?

Secondly how do I get the Bootstrap-Select live-search functionality to work from an external .js file on a Partial View/Editor/Display template?

Below is what I used to get the drop-downs to be searchable:

@model EacWebApp.Models.ViewModels.Shared.NewPortfoliosViewModel
<script type="text/javascript" src="~/Scripts/bootstrap-select.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap-select.min.css" />
<script>
    $(function() {
        $('.selectpicker').selectpicker({
            livesearch: true
        })
    });
</script>
<div class="row form-allocation-table-header-row">
    <div class="col-sm-1 form-row-label text-center">
        DISC
    </div>
    <div class="col-sm-5 form-row-label text-center">
        PORTFOLIO
    </div>
    <div class="col-sm-3 form-row-label text-center">
        ALLOCATION
    </div>
    <div class="col-sm-1 form-row-label text-center" style="padding: 0 5px;">
        TIC
    </div>
    <div class="col-sm-1 form-row-label text-center"></div>
</div>

@for (int i = 0; i < Model.MaxNumberOfAvailablePortfolios; i++)
{
    <div class="row portfolio-allocation-dropdown">
        <div class="selected-portfolio-data">
            <input type="hidden" data-property-source="data-portfolio-name" name="Portfolios[@i].Name" />
            <input type="hidden" data-property-source="value" name="Portfolios[@i].FundId" />
            <input type="hidden" data-property-source="data-portfolio-id" name="Portfolios[@i].Id" />
            <input type="hidden" data-property-source="data-portfolio-udw-id" name="Portfolios[@i].FundUdwId" />
            <input type="hidden" data-property-source="data-portfolio-class" name="Portfolios[@i].Class" />
            <input type="hidden" data-property-source="data-portfolio-discount" name="Portfolios[@i].IsDiscountable" />
            <input type="hidden" data-property-source="data-is-phase-in-allowed" name="Portfolios[@i].IsPhaseInAllowed" />
            <input type="hidden" data-property-source="data-is-phase-out-allowed" name="Portfolios[@i].IsPhaseOutAllowed" />
            <input type="hidden" data-property-source="data-tic-real-value" name="Portfolios[@i].TIC" value="tic" />
            <input type="hidden" data-property-source="portfolio-allocation" name="Portfolios[@i].AllocationPercent" />
        </div>
        <div class="col-sm-1">
            <input type="checkbox" onclick="return false;" class="is-discounted" />
        </div>
        <div class="col-sm-5">
            <select class="form-row-dropdown portfolioList selectpicker" id="portfolioDropDown" data-live-search="true" onchange="fillSelectedPortfolioData(this)">
                <option value="empty">Empty Slot</option>
                @{
                    foreach (var portfolio in Model.AvailablePortfolios)
                    {
                        <option value="@portfolio.FundId" data-is-phase-in-allowed="@portfolio.IsPhaseInAllowed" data-is-phase-out-allowed="@portfolio.IsPhaseOutAllowed"
                                data-portfolio-discount="@portfolio.IsDiscountable" data-portfolio-udw-id="@portfolio.FundUdwId" data-portfolio-id="@portfolio.Id"
                                data-portfolio-class="@portfolio.Class" data-portfolio-name="@portfolio.Name">
                            @portfolio.Name
                        </option>
                    }
                }
            </select>
        </div>
        <div class="col-sm-3 allocation-inputs collapsed">
            <button class="minus-button-holder">
                <span class="glyphicon glyphicon-minus"></span>
            </button>
            <input class="text-center portfolio-allocation-percentage-input pseudo-verticaly-centered" value="0" oninput="validateNumberInput(event, this)" onfocus="removeZeroFromInput(this)" onblur="addZeroToInput(this)" /><span class="percentage-sign pseudo-verticaly-centered">%</span>
            <button class="plus-button-holder">
                <span class="glyphicon glyphicon-plus"></span>
            </button>
        </div>
        <div class="col-sm-3 no-portfolio-selected" style="text-align:center">-</div>
        <div class="col-sm-1 no-portfolio-selected" style="text-align:center">-</div>
        <div class="col-sm-1 portfolio-tic-container collapsed" style="padding: 0">
            <input type="text" class="portfolio-tic pseudo-verticaly-centered" data-tic-real-value="0" readonly="readonly" oninput="changeTicValue(event, this)" onfocus="removeZeroFromInput(this)" onblur="addZeroToInput(this)" /><span style="display: inline-block;" class="pseudo-verticaly-centered">%</span>
        </div>
        <div class="col-sm-1 text-center">
            <button class="portfolio-allocation-remove-allocation-percentage">
                <span class="glyphicon glyphicon-remove"></span>
            </button>
        </div>
    </div>
}

The drop-downs work fine, but the other .js functionality is seems to be negated.