Autocomplete dropdown in MVC5?

Sneha K

10y7.6k.NET

Hi i have one field in my view. That field is Customer it is a dropdown field. In that i have keep dropdown as select option to select the value. But i like to change that field as Autocomplete dropdown.

In the above image I have customerName field as dropdown field but i keep it by search and select option. But now i like to change this to autocomplete dropdown like which is mention the in the below image.

enter image description here

My view Code

@Html.Label("Customer Name", new { @class = "control-label" })

@Html.DropDownListFor(model => model.CustomerID, new SelectList(string.Empty, "Value", "Text"), "Please select a Customer", new { @class = "form-control required", type = "text" })

My Jquery Code

$(function () {

debugger;

$.ajax(

'@Url.Action("GetVisitCustomer", "VisitorsForm", new { Area = "Sales" })',{

type: "GET",

datatype: "Json",

success: function (data) {

$.each(data, function (index, value) {

$('#CustomerID').append('');

});

}

});

My Controller Code to get Customers and load in the field

public JsonResult GetVisitCustomer()

{

var objCustomerlist = (from c in db.Customers where c.IsDeleted== false select c).ToList();

return Json( objCustomerlist,JsonRequestBehavior.AllowGet);

}

I tried to explain my issue. Any one help to resolve this issue. I tried many ways but its not working. So any one understand my issue and give some solution or suggesstions.

The Code which i have tried

@Html.Label("Customer Name", new { @class = "control-label" })

@Html.TextBoxFor(Model=>Model.CustomerID)

My Jquery Code

But this code is not working

Advance Thanks.

7 Replies

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

Manas Mohapatra10y ago
Go step by step to resolve problem:

1. You need to hit your server side function "GetVisitCustomer" through AJAX request. First make sure that everything is correct from javascript side means no incorrect syntax. Next go to your server side function and you need to add tag [HttpPost] on top of your method because you are sending POST in AJAX.

Then add one parameter in in your function to get the value from text box which you are passing in data attribute of AJAX. Then your function should like:

[HttpPost]
public JsonResult GetVisitCustomer(string term)
{
var objCustomerlist = (from c in db.Customers where c.IsDeleted== false select c).ToList();
return Json( objCustomerlist,JsonRequestBehavior.AllowGet);
}

2. Once you are able to hit the method, next task to execute everything successfully in server side. When it return backs result to browser, see it in browser whether response is correct in JSON format.

For reference:

http://www.dailyfreecode.com/Code/create-jquery-autocomplete-dropdown-mvc-3687.aspx
Sneha K10y ago
Manas i cheked in Console only by  using debugger. Then only find it didnt hit the json function,.
Balaji Palani10y ago
Sneha,
Please change the jquery code and try with debugging to resolve
$.ajax({
url: "/VisitorsForm/GetVisitCustomer",
type: "POST",
dataType: "json",
data: { Prefix: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.Name, value: item.Name };
}))
Manas Mohapatra10y ago
Please follow below steps to resolve your problem:

1. Put a break point near to the method which one you are calling from json. And see whether it hits and executes without any fail/exception.

2. If above steps works fine then next phase for browser check. In browser F12 and see developer tool; use chrome browser to catch the issue. Check Console tab in your browser and see if there is any red text which is failing..
Sneha K10y ago
Yes Balaji
it didnt hit the GetVisit Customer json code
Balaji Palani10y ago
Try this jquery code:
$(document).ready(function () {
$("#CustomerID").autocomplete({
source: function(request,response) {
$.ajax({
url: "/VisitorsForm/GetVisitCustomer",
type: "POST",
dataType: "json",
data: { Prefix: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.Name, value: item.Name };
}))
}
})
},
messages: {
noResults: "", results: ""
}
});
})
Balaji Palani10y ago
Hi Sneha,
Did you tried with beak point on GetVisitCustomer(),
This JsonResult method called?