Create DropdownListFor + AutoComplete in ASP.Net MVC 5

Try the following code for autocomplete textbox in asp.net mvc

@Html.TextBoxFor(model => model.CategoryID)
@section scripts{
<script src="~/Scripts/jquery-ui-1.12.1.js">script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$(function () {
$("#CategoryID").autocomplete({
source: function (request, response) {
$.ajax({
url: '@Url.Action("AutoComplete")',
datatype: "json",
data: {
term: request.term
},
success: function (data) {
response($.map(data, function (val, item) {
return {
label: val.Name,
value: val.Name,
CategoryId: val.ID
}
}))
}
})
},
select: function (event, ui) {
$.get("/Home/GetSProductList", { CategoryID: ui.item.CategoryId }, function (data) {
$("#ProductID").empty();
$.each(data, function (index, row) {
$("#ProductID").append("<option value='" + row.ProductID + "'>" + row.ProductName + "option>")
});
});
}
})
})
script>
}

In action write the following code with modified table as per in your database and column name. The same should be changed in above jquery code.

public ActionResult AutoComplete(string term)
{
if (!String.IsNullOrEmpty(term))
{
var list = db.Categories.Where(c=>c.CategoryName.ToUpper().Contains(term.ToUpper())).Select(c => new { Name = c.CategoryName, ID = c.CategoryID })
.ToList();
return Json(list, JsonRequestBehavior.AllowGet);
}
else
{
var list = db.Categories.Select(c => new { Name = c.CategoryName, ID = c.CategoryID })
.ToList();
return Json(list, JsonRequestBehavior.AllowGet);
}
}

You can check with the below link for more help

https://forums.asp.net/t/2132972.aspx?HOW+TO+CREATE+AUTOCOMPLETE+DROPDROWN+LIST+IN+ASP+NET+MVC5+VIEW+

Hope this will help you.

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sanwar Ranwa8y ago
Accepted answer
Hello

Please check this Link

https://www.aspsnippets.com/Articles/Implement-jQuery-AutoComplete-DropDown-ComboBox-in-ASPNet-MVC.aspx

https://www.c-sharpcorner.com/UploadFile/0c1bb2/creating-autocomplete-textbox-in-Asp-Net-mvc-5/
+3
Suraj Kumar8y ago
Try the following code for autocomplete textbox in asp.net mvc
@Html.TextBoxFor(model => model.CategoryID)
@section scripts{
<script src="~/Scripts/jquery-ui-1.12.1.js">script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script>
        $(function () {
            $("#CategoryID").autocomplete({
                source: function (request, response) {
                $.ajax({
                    url: '@Url.Action("AutoComplete")',
                    datatype: "json",
                    data: {
                        term: request.term
                    },
                    success: function (data) {
                        response($.map(data, function (val, item) {
                            return {
                                label: val.Name,
                                value: val.Name,
                                CategoryId: val.ID
                            }
                        }))
                    }
                })
            },
            select: function (event, ui) {
                $.get("/Home/GetSProductList", { CategoryID: ui.item.CategoryId }, function (data) {
                    $("#ProductID").empty();
                    $.each(data, function (index, row) {
                        $("#ProductID").append("<option value='" + row.ProductID + "'>" + row.ProductName + "option>")
                    });

                });
            }
            })
        })
    script>
}
In action write the following code with modified table as per in your database and column name. The same should be changed in above jquery code.
public ActionResult AutoComplete(string term)
{
    if (!String.IsNullOrEmpty(term))
    {
        var list = db.Categories.Where(c=>c.CategoryName.ToUpper().Contains(term.ToUpper())).Select(c => new { Name = c.CategoryName, ID = c.CategoryID })
            .ToList();
        return Json(list, JsonRequestBehavior.AllowGet);
    }
    else
    {
        var list = db.Categories.Select(c => new { Name = c.CategoryName, ID = c.CategoryID })
            .ToList();
        return Json(list, JsonRequestBehavior.AllowGet);
    }
}
You can check with the below link for more help

https://forums.asp.net/t/2132972.aspx?HOW+TO+CREATE+AUTOCOMPLETE+DROPDROWN+LIST+IN+ASP+NET+MVC5+VIEW+

Hope this will help you.
+1
Antony Judes8y ago
Thank you Sanwar Ranwa!.
i will try and contact u.

thank you very much.
0