Auto Complete Using jQuery and ASP.NET MVC

• Download source (no EXE) - 375.4 KB
• Download source - 1.2 MB

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. Download jquery.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 named HomeController and in this controller, create an ActionResult method named Index.

     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.

  @{
    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 display static data through select item list.

  [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 name id. 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.

  [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 is select. 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.

  <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.

History

• 15^th March, 2014: Initial version