Auto Complete Using jQuery and ASP.NET MVC

Introduction

This tip introduces approaches to show suggestion while you type into the field(Text Box) in ASP.NET MVC project. It is possible by using jquery UI autocomplete method.

Using the Code

To start this task, you need jQuery and jQuery plugin libraries. You can download these from here. Downloadjquery.ui.autocomplete.js.

First of all, open Visual Studio 2012. After that, select new project and click on ASP.NET MVC4 Web Application in Visual C#, name the project Autocomplete and whatever you like. Create a controller namedHomeController and in this controller, create an ActionResult method named Index.

 Collapse | Copy Code

     public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

     }  

Now create a view, right click on the Index action method and select Add View and then click OK. Write the following code in this view for add a TextBox using @html helper.

 Collapse | Copy Code

  @{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
  @Html.Label("Enter Your name")
  @Html.TextBox("PassId")  

Now, create Action on controller that returns a list of suggestion. Here, I am not using database so I displaystatic data through select item list.

 Collapse | Copy Code

  [AcceptVerbs(HttpVerbs.Post)]
        public JsonResult Autocomplete(string term)
        {
            var result = new List<KeyValuePair<string, string>>();

            IList<SelectListItem> List = new List<SelectListItem>();
            List.Add(new SelectListItem { Text = "test1", Value = "0" });
            List.Add(new SelectListItem { Text = "test2", Value = "1" });
            List.Add(new SelectListItem { Text = "test3", Value = "2" });
            List.Add(new SelectListItem { Text = "test4", Value = "3" });

            foreach (var item in List)
            {
                result.Add(new KeyValuePair<string, string>(item.Value.ToString(), item.Text));            
            }
            var result3 = result.Where(s => s.Value.ToLower().Contains(term.ToLower())).Select(w => w).ToList();
            return Json(result3, JsonRequestBehavior.AllowGet);
        } 
Add a model for get set detailed information.
namespace Autocomplete.Models
{
    public class DemoModel
    {
        public int id { get; set; }
        public string name { get; set; }
        public string mobile { get; set; }
    }
}  

Now, add another action result for getting detail information of selected term by id. It takes a parameter nameid. Using this id, get detailed information about selected item. It return json object of data. Now get data from json and append it to view controls.

 Collapse | Copy Code

  [AcceptVerbs(HttpVerbs.Post)]
        public JsonResult GetDetail(int id)
        {
            DemoModel model = new DemoModel();
           // select data by id here display static data;
            if (id == 0)
            {
                model.id = 1;
                model.name = "Yogesh Tyagi";
                model.mobile = "9460516787";
            }
            else {
                model.id = 2;
                model.name = "Pratham Tyagi";
                model.mobile = "9460516787";            
            }

            return Json(model);            
        }  

Now you need to add the following JavaScript code to your view that will be call “autocomplete” method of jquery UI whenever you type any char in Textbox. It has two methods, the first is source and another isselect. The source method calls when fire “keyup” event of textbox. In source method, we call controller using Ajax This controller method returns a list of suggestion.

When we select a suggestion from list, then another method “select” calls and it also calls controller using Ajax and it return details of selected suggestion.

 Collapse | Copy Code

  <script type="text/javascript">
    $("#PassId").autocomplete({
        source: function (request, response) {
            var customer = new Array();
            $.ajax({
                async: false,
                cache: false,
                type: "POST",
                url: "@(Url.Action("Autocomplete", "Home"))",
                data: { "term": request.term },
                success: function (data) {
                    for (var i = 0; i < data.length ; i++) {
                        customer[i] = { label: data[i].Value, Id: data[i].Key };
                    }
                }
            });
            response(customer);
        },
         select: function (event, ui) {
             //fill selected customer details on form
             $.ajax({
                 cache: false,
                 async: false,
                 type: "POST",
                 url: "@(Url.Action("GetDetail", " Home"))",
                data: { "id": ui.item.Id },

                success: function (data) {
                    $('#VisitorDetail').show();
                    $("#Name").html(data.VisitorName)
                    $("#PatientName").html(data.PatientName)
                    //alert(data.ArrivingTime.Hours)
                    $("#VisitorId").val(data.VisitorId)
                    $("#Date").html(data.Date)
                    $("#ArrivingTime").html(data.ArrivingTime)
                    $("#OverTime").html(data.OverTime)

                    action = data.Action;
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert('Failed to retrieve states.');
                }
            });
        }
     });

</script>  

Now, run your application and type “t” in Textbox. It looks like:

Select one item from list. It will appear in text box and it calls “select” method of autocomplete that returns detail information about selected information.

 

Source from

http://www.codeproject.com/Tips/746697/Auto-Complete-Using-jQuery-and-ASP-NET-MVC