Press "Enter" to skip to content

Autocomplete Textbox in MVC 5 using jQuery.

Anshu Kumar 0

Sharing is caring !!

we are implementing  Autocomplete Textbox  in MVC 5 using  jQuery.

The very first step is to create MVC application using visual studio  and create database in sql server.

And create table Course  in database and call that table in an ASP.Net MVC Application using Entity Framework.

 

In Controller :

public ActionResult Index()

{

return View();

}

This method is used for autocompete.

public JsonResult GetAutoCompete(string Search)

{

var result = new CourseModel().GetAutoCompete(Search);

return Json(result, JsonRequestBehavior.AllowGet);

}

In Module: CourseModel.cs

public class Courses1

{

public int CourseID { get; set; }

public string CourseName { get; set; }

}

Here we are fetching data (Contains keywords) from records of table course (database ), and getting  in list.

public class CourseModel{

public List<Course1> GetAutoCompete(string Search)

{

using (Course Context db = new Course Context())

{

var data = (from a in db.Courses where a.CourseName.Contains(Search)

// auto populate the records which contain any typed alphabet, for that we are using contains

select new

{

CourseName = a.CourseName,

}

).Distinct().ToList();

List<Course1> C = new List<Course1>();

      foreach (var i in data)

    {

       Course1 C1 = new Course1 ();

       C1.CourseName = i.CourseName;

      C1.CourseID = i.CourseID;

      C.Add(C1);

     }

      return C;

   }

  }

}

In UI html

We are giving reference of jquery(it is required to give reference)

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

//jQuery UI to create auto complete textbox in ASP.NET MVC

 

Html code of text box , where we will enter keywords.

<input type="text" class="form-control input-sm" id="Search" name="Search" placeholder="Search" style="color: white;" />

Script code of autocomplete

<script>

$(document).ready(function () {

$("#Search").autocomplete({

source: function (request, response) {

$.ajax({

url: "/Home/GetAutoCompete",

type: "POST",

dataType: "json",

data: { Search: request.term },

success: function (data) {

response($.map(data, function (item) {

return {

label: item.CourseName , value: item.CourseName,

};

}))

}

})

},

messages: {

noResults: "No results",

results: function (count) {

return count + (count == 0 ? ' result' : ' results');

}

}

});

 

 

Sharing is caring !!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares