Post
Ask Question

Search Box Auto Suggestion when Typing using Web Service and JQuery

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">  
  3.   
  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.             });  
  16.   
  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>  
  75.   
  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>  
  87.   
  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.
Next Recommended Reading Creating Dropdowns And Multi-Select Boxes Using Chosen JQuery Library