Add Search Functionality on Dropdownlistfor

add search functionality on DropDownListFor

You are using a bootstrap plugin called bootstrap-select. To use it in razor view, do this.

@Html.DropDownListFor(x =>
    x.StockCode,
    (IEnumerable<SelectListItem>)ViewBag.AllStockList,
    new
    {
        @class = "form-control selectpicker",
        @Value = @Model.Description,
        onchange = "this.form.submit();"
})

Don't change anything in the razor view except adding the class selectpicker. Now initialize the plugin by setting the options in JavaScript like this.

$(document).ready(function() {
    $('.selectpicker').selectpicker({
        liveSearch: true,
        showSubtext: true
    });
});

Demo: http://jsfiddle.net/codeandcloud/a5r2vyu2/1/

Documentation: https://silviomoreto.github.io/bootstrap-select/options/

To add data-* attributes in razor syntax replace - with _ like this.

@Html.DropDownListFor(x =>
    x.StockCode,
    (IEnumerable<SelectListItem>)ViewBag.AllStockList,
    new
    {
        @class = "form-control selectpicker",
        @Value = @Model.Description,
        onchange = "this.form.submit();",
        data_show_subtext="true",
        data_live_search="true"
})

Read this and this.

How to add Search Functionality to a dropdownlist in asp.net using Select2.js

Try to Set DropDownList's ClientIDMode property to Static.

Searchable DropDownList in MVC ASP.Net using CHOSEN

You can specify chosen class like this:

 @Html.DropDownList("materialId", null, htmlAttributes: new { @class = "form-control chosen" })

Also, ensure that you have chosen plugin referenced in Layout.cshtml. Check for any javascript errors using browser Developer tools by pressing F12 key on the browser and then refreshing the page

Update

Include jquery and chosen plugin references before the RenderSection("scripts")

 <script src="~/Scripts/jquery.min.js"></script>
 <script src="~/Scripts/chosen.jquery.min.js"></script>
 @RenderSection("scripts", false)

DropDownListFor (data-live-search=true) how do i add?

@Html.DropDownListFor(model => model.Odeyenİd, 
    new SelectList(ViewBag.Musteriler, "İd", "MusteriAdiSoyadi"), 
    new { @class = "selectpicker form-control",@data_live_search=... 
})

Searching with a dropdown list in asp.net MVC

Try this.

Controller action:

public ActionResult Index(string CompanyID)
{
    DentiCareEntities db = new DentiCareEntities();
    ViewBag.CompanyId = new SelectList(db.Companies, "CompanyId", "CompanyName", CompanyID);    // preselect item in selectlist by CompanyID param

    if (!String.IsNullOrWhiteSpace(CompanyID))
    {
        return View();
    }

    return View(db.Treatments.Where(x => x.CompanyID == CompanyID).Take(50));
}

View code:

@model IEnumerable<Treatment>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Quickly Generate Invoice</h2>

@using (Html.BeginForm("Index", "GenerateInvoice", FormMethod.Get))
{
    @Html.AntiForgeryToken()

    @Html.DropDownList("CompanyId", (SelectList)ViewBag.CompanyId, "Select Company", new { @class = "form-control" })
    <input type="submit" value="Search" class="btn btn-primary" />
}

@if(Model != null && Model.Any())
{
    foreach(var item in Model)
    {
        @Html.DisplayFor(model => item)
    }
}

You can change the DisplayFor() here to show individual properties of the given Treatment, such as @Html.DisplayFor(model => model.TreatmentID) and such

How can Make a searchable DropDownList in asp.net mvc

I have added two ways for this you can choose any one of them :

1. Check the below chosen plugin for jQuery. Its more useful, user friendly and has vary nice UI structure.

It has the many feature which you are looking for. Please go through the following link for more details

http://harvesthq.github.io/chosen/

2. Other option is Select2, it's jQuery and it will provide you the reach look and feels:

https://select2.org

Cheers !!

---

Related Topics