Example for output of this code:

User name

Step 1: Open visual studio start a new project.

Step 2: Add a master page like below.

Add Master page

Step 3: Paste this code in Master page.

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head id="Head1" runat="server">
  5. <title></title>
  6. <asp:ContentPlaceHolder id="head" runat="server">
  7. <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" />
  8. <link href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
  9. <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
  10. <script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  11. <script type="text/javascript">
  12. $(function ()
  13. {
  14. SearchText();
  15. });
  17. function SearchText()
  18. {
  19. $(".autosuggest")
  20. .autocomplete(
  21. {
  22. source: function (request, response)
  23. {
  24. $.ajax(
  25. {
  26. type: "POST",
  27. contentType: "application/json; charset=utf-8",
  28. url: "AutoCompleteService.asmx/GetAutoCompleteData",
  29. data: "{'name':'" + $('#Search')
  30. .val() + "'}",
  31. dataType: "json",
  32. success: function (data)
  33. {
  34. if(data.d.length > 0)
  35. {
  36. response($.map(data.d, function (item)
  37. {
  38. return {
  39. label: item.split('/')[0],
  40. val: item.split('/')[1]
  41. }
  42. }));
  43. }
  44. else
  45. {
  46. response([
  47. {
  48. label: 'No Records Found',
  49. val: -1
  50. }]);
  51. $('#Search')
  52. .val('');
  53. }
  54. },
  55. error: function (result)
  56. {
  57. alert("Error");
  58. }
  59. });
  60. },
  61. select: function (event, ui)
  62. {
  63. if(ui.item.val == -1)
  64. {
  65. return false;
  66. }
  67. //Get Selected Value
  68. //alert(ui.item.val);
  69. }
  70. });
  71. }
  72. </script>
  73. </asp:ContentPlaceHolder>
  74. </head>
  76. <body>
  77. <form id="form1" runat="server">
  78. <div class="demo">
  79. <div class="ui-widget">
  80. <label for="tbAuto"> UserName: </label>
  81. <input type="text" id="Search" class="autosuggest" /> </div>
  82. <div>
  83. <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder>
  84. </div>
  85. </form>
  86. </body>
  88. </html>
Step 4: Then add a websevice page. add --> New item-->web service.asmx and rename it as "AutoCompleteService.asmx"

Paste below code in AutoCompleteService.asmx page.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Data.SqlClient;
  4. using System.Linq;
  5. using System.Web;
  6. using System.Web.Services;
  7. namespace _9_nov_search_box_auto_suggetion
  8. {
  9. [System.Web.Script.Services.ScriptService]
  10. public class AutoCompleteService: System.Web.Services.WebService
  11. {
  12. [WebMethod]
  13. public List < string > GetAutoCompleteData(string name)
  14. {
  15. List < string > result = new List < string > ();
  16. using(SqlConnection con = new SqlConnection("Data Source=192.168.3.48;Initial Catalog=vikram;User ID=sa;Password=Atharvana01"))
  17. {
  18. using(SqlCommand cmd = new SqlCommand("select DISTINCT name from people1 where name LIKE '%'+@SearchText+'%'", con))
  19. {
  20. con.Open();
  21. cmd.Parameters.AddWithValue("@SearchText", name);
  22. SqlDataReader dr = cmd.ExecuteReader();
  23. while(dr.Read())
  24. {
  25. result.Add(dr["name"].ToString());
  26. }
  27. return result;
  28. }
  29. }
  30. }
  31. }
  32. }
Step 5: Add a new webform1.aspx.

Paste below code in webform1.aspx.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="_9_nov_search_box_auto_suggetion.WebForm1" MasterPageFile="~/Site1.Master" %>
  2. <asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
  3. <p>Child Page</p>
  4. </asp:Content>
Above web form code please change master page file address and change connection string , table name and all.