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 {
  3. // LIST OBJECT WILL HOLD AND RETURN A LIST OF BOOKS.
  4. List < ClassModel > MyBooks = new List < ClassModel > ();
  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. });
  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