Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

MVC4 jQuery AutoComplete TextBox using WEB API

Article:
Viewed:  3042 
Posted On:  22/11/2014 10:59:45 
How we can use WEB API to make jQuery Auto Complete Text Box in MVC 4 ? 

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.

1.png

Image 1.

Open Visual Studio -> New -> Project.

2.png

Image 2.

3.png

Image 3.

Now we will add our Data Table. So Right click on Models folder -> Add-> ADO.NET Entity Data Model.

4.png

Image 4.

Give it a name.

5.png

Image 5.

6.png

Image 6.

7.png

Image 7.

8.png

Image 8.

9.png

Image 9.

10.png

Image 10.

Now time to add  WEB API. So Right click on Controller-> Add -> Controller.

11.png

Image 11.

Select API Controller with read/write actions, using Entity Framework from Template, Select Model Class and select Data Context Class. -> ADD.

12.png

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.

13.png

Image 13.

Now add a View. So Right Click on Index Method -> Add View.

14.png

Image 14.

15.png

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-height100px;
        overflow-yauto;
    }
 
    .ui-autocomplete {
        height100px;
    }
</style>
<div id="body">
    <table style="background-colorskybluebordersolid 4px greenwidth80%text-aligncenter;">
        <tr>
            <td>
                <label for="autocomplete-textbox">Enter User Name : </label>
            </td>
            <td style="text-alignleft">
                <input type="text" id="txtName" /></td>
        </tr>
        <tr>
            <td></td>
        </tr>
        <tr>
            <td>
                <label id="lblMessage" style="colorred;"></label>
            </td>
            <td style="text-alignleft">
                <label id="lblSelectedVal" style="colormagenta;"></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

16.png

Image 16.

17.png

Image 17.

18.png

Image 18.

19.png

Image 19.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us