In this article I am going to explain how we can create jQuery auto complete text box using WEB API in MVC 4.
Below is my Data Table from which I will show the record.
Image 1.
Open Visual Studio -> New -> Project.
Image 2.
Image 3.
Now we will add our Data Table. So Right click on Models folder -> Add-> ADO.NET Entity Data Model.
Image 4.
Give it a name.
Image 5.
Image 6.
Image 7.
Image 8.
Image 9.
Image 10.
Now time to add WEB API. So Right click on Controller-> Add -> Controller.
Image 11.
Select API Controller with read/write actions, using Entity Framework from Template, Select Model Class and select Data Context Class. -> ADD.
Image 12.
This StudentAPI controller will generate code for GET, PUT, POST & DELETE method. Here I modify my GET Method as I need to pass my search text.
Here we need only GET method.
My StudentAPIController class is:
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;
using jQuery_AutoComplete_WithWEBAPI.Models;
namespace jQuery_AutoComplete_WithWEBAPI.Controllers
{
public class StudentAPIController : ApiController
{
private SchoolManagementEntities db = new SchoolManagementEntities();
// GET api/Student
public IEnumerable<Student> GetStudents(string searchText)
{
return db.Student.Where(m => m.Name.Contains(searchText)).ToList();
}
// GET api/StudentAPI/5
public Student GetStudent(int id)
{
Student student = db.Student.Find(id);
if (student == null)
{
throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));
}
return student;
}
// PUT api/StudentAPI/5
public HttpResponseMessage PutStudent(int id, Student student)
{
if (ModelState.IsValid && id == student.StudentID)
{
db.Entry(student).State = EntityState.Modified;
try
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException)
{
return Request.CreateResponse(HttpStatusCode.NotFound);
}
return Request.CreateResponse(HttpStatusCode.OK);
}
else
{
return Request.CreateResponse(HttpStatusCode.BadRequest);
}
}
// POST api/StudentAPI
public HttpResponseMessage PostStudent(Student student)
{
if (ModelState.IsValid)
{
db.Student.Add(student);
db.SaveChanges();
HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, student);
response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = student.StudentID }));
return response;
}
else
{
return Request.CreateResponse(HttpStatusCode.BadRequest);
}
}
// DELETE api/StudentAPI/5
public HttpResponseMessage DeleteStudent(int id)
{
Student student = db.Student.Find(id);
if (student == null)
{
return Request.CreateResponse(HttpStatusCode.NotFound);
}
db.Student.Remove(student);
try
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException)
{
return Request.CreateResponse(HttpStatusCode.NotFound);
}
return Request.CreateResponse(HttpStatusCode.OK, student);
}
protected override void Dispose(bool disposing)
{
db.Dispose();
base.Dispose(disposing);
}
}
}
Now add a controller. Right click on Controller Folder -> Add -> Controller.
Image 13.
Now add a View. So Right Click on Index Method -> Add View.
Image 14.
Image 15.
Make sure your solution have below js and css files. Otherwise you can download these from jQuery site.
jquery-1.8.2.js
jquery-ui-1.9.0.js
& jquery-ui-1.9.0.custom.css
Now our Index.cshtml is:
@{
ViewBag.Title = "jQuery AutoComplete Text Box using WEB API";
}
<link href="~/CSS/jquery-ui-1.9.0.custom.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-ui-1.9.0.min.js"></script>
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
}
.ui-autocomplete {
height: 100px;
}
</style>
<div id="body">
<table style="background-color: skyblue; border: solid 4px green; width: 80%; text-align: center;">
<tr>
<td>
<label for="autocomplete-textbox">Enter User Name : </label>
</td>
<td style="text-align: left">
<input type="text" id="txtName" /></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<label id="lblMessage" style="color: red;"></label>
</td>
<td style="text-align: left">
<label id="lblSelectedVal" style="color: magenta;"></label>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#txtName').autocomplete({
source: function (request, response) {
var autocompleteUrl = '/api/StudentAPI' + '?searchText=' + request.term;
$.ajax({
url: autocompleteUrl,
type: 'GET',
cache: false,
dataType: 'json',
success: function (json) {
response($.map(json, function (data, id) {
return {
label: data.Name,
value: data.Name
};
}));
},
error: function (xmlHttpRequest, textStatus, errorThrown) {
console.log('some error occured', textStatus, errorThrown);
}
});
},
minLength: 1,
select: function (event, ui) {
lblMessage.innerText = "Your Selected Name :";
lblSelectedVal.innerText = ui.item.label;
$('#txtName').val(ui.item.label);
return false;
}
});
});
</script>
Run the application
Image 16.
Image 17.
Image 18.
Image 19.