Post
Ask Question

Autocomplete Box using Jquery Ajax and Web API in MVC 4

1. Add Model Class

  1. namespace testmvcapp.Models {  
  2.     public class ClassModel {  
  3.         public string StdName {  
  4.             get;  
  5.             set;  
  6.         }  
  7.     }  
  8. }

Add Model Class

2. Modify on WebApiConfig

  1. public static class WebApiConfig {  
  2.     public static void Register(HttpConfiguration config) {  
  3.         config.Routes.MapHttpRoute(  
  4.         name: "DefaultApi",  
  5.         routeTemplate: "api/{controller}/{sLookUpString}",  
  6.         defaults: new {  
  7.             sLookUpString = RouteParameter.Optional  
  8.         });  
  9.     }  
  10. }

WebApiConfig

3. Add a controller and set the method to return string

  1. public class BooksController: ApiController {  
  2.   
  3.     // LIST OBJECT WILL HOLD AND RETURN A LIST OF BOOKS.  
  4.     List < ClassModel > MyBooks = new List < ClassModel > ();  
  5.   
  6.     // RETURN A LIST OF BOOKS MATCHING WITH THE REQUESTED ALPHANUMERIC VALUE(S).  
  7.     public IEnumerable < ClassModel > Get(string sLookUpString) {  
  8.         GetTheBooks(sLookUpString);  
  9.         return MyBooks;  
  10.     }  
  11.     public void GetTheBooks(string sFind) {  
  12.         string sConnString = "";  
  13.         SqlConnection myConn = new SqlConnection(sConnString);  
  14.         // SEARCH DATABASE TABLE MATCHING BOOKS WITH THE "LOOKUP" STRING.  
  15.         SqlCommand objComm = new SqlCommand("SELECT * FROM dbo.studentmaster where StdName like '" + sFind + "%' order by StdName desc ", myConn);  
  16.         myConn.Open();  
  17.         // objComm.Parameters.AddWithValue("@LookUP", sFind);  
  18.         SqlDataReader reader = objComm.ExecuteReader();  
  19.         // ADD EACH BOOKNAME ALONG WITH ITS ID IN THE LIST.  
  20.         while (reader.Read()) {  
  21.             MyBooks.Add(new ClassModel {  
  22.                 StdName = reader["StdName"].ToString()  
  23.             });  
  24.         }  
  25.         myConn.Close();  
  26.     }  
  27. }

Add a controller

4. And Finally call in .cshtml Method

  1. < !DOCTYPE html > @using(Html.BeginForm()) { < html > @section Scripts { < script type = "text/javascript" > $(document).ready(function() {  
  2.             BindControls();  
  3.         });  
  4.   
  5.         function BindControls() {  
  6.             $("#myBooks").autocomplete({  
  7.                 source: function(request, response) {  
  8.                     var val = request.term;  
  9.                     $.ajax({  
  10.                         url: "/api/Books/" + val,  
  11.                         type: "GET",  
  12.                         success: function(data) {  
  13.                             response($.map(data, function(item) {  
  14.                                 return {  
  15.                                     value: item.StdName  
  16.                                 }  
  17.                             }))  
  18.                         },  
  19.                         error: function(XMLHttpRequest, textStatus, errorThrown) {  
  20.                             alert(textStatus);  
  21.                         }  
  22.                     });  
  23.                 },  
  24.                 minLength: 1 // MINIMUM 1 CHARACTER TO START WITH.  
  25.             });  
  26.         } < /script>  
  27. }
  1. <head>  
  2.     <title>AutoComplete Example using Asp.Net Web API and JQuery Ajax</title>  
  3.     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css"  
  4. rel="stylesheet" type="text/css"/>  
  5.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>  
  6.     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>  
  7. </head>  
  8. <body style="font-size:80%">  
  9.     <div style="font:15px Verdana;">  
  10. Type a letter:   
  11.         <input type="text" value="" id="myBooks" />  
  12.     </div>  
  13. </body>undefined</html> 

Method

5. Final output is:

Final output is