Auto Complete TextBox in MVC with Asp.Net

Description:-

In this example we explain that how to create auto complete textbox in mvc4 using jquery or how to create auto complete textbox facility same like Ajax auto complete textbox in asp.net with mvc.

Here we provide facility same like as we normally used in asp.net with Ajax. This is simple requirement that we have required in every web application so here explain how to provide auto complete textbox facility to user in mvc application.

This functionality work same like as Ajax if user enter any character in mvc country textbox then it's related country list are render in below the textbox as a box list type same we have already seen in asp.net with Ajax.

To show Example How to insert,update,delete in DataList control clikck here  CRUD operation in DataList 

 How to Bind Excelsheet Data to Gridview CRUD operation in Excelsheet Database

How to Display Layer on one Another in CSS Overlapping Layer in CSS

To create Autocomplete Textbox in mvc with asp.net in mvc4 follow the below step

Add a model class with name DemoModel in model folder for the get and set detailed information.

namespace Autocomplete.Models

{

      public class DemoModel

      {

          public int id { get; set; }

          public string name { get; set; }

          public string mobile { get; set; }

      }

}

Homecontroller.cs:-

public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}

//returns a list of suggestions

[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);
}

//detail information of the selected term by id

[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);
}

}

Index.cshtml:-

@{
   ViewBag.Title = "Index";
}
<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>

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