Search Box Auto Suggestion when Typing using Web Service and JQuery

Vikram
9y
3.3k
0
2

Blog

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.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" />
<link href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function ()
{
SearchText();
});
function SearchText()
{
$(".autosuggest")
.autocomplete(
{
source: function (request, response)
{
$.ajax(
{
type: "POST",
contentType: "application/json; charset=utf-8",
url: "AutoCompleteService.asmx/GetAutoCompleteData",
data: "{'name':'" + $('#Search')
.val() + "'}",
dataType: "json",
success: function (data)
{
if(data.d.length > 0)
{
response($.map(data.d, function (item)
{
return {
label: item.split('/')[0],
val: item.split('/')[1]
}
}));
}
else
{
response([
{
label: 'No Records Found',
val: -1
}]);
$('#Search')
.val('');
}
},
error: function (result)
{
alert("Error");
}
});
},
select: function (event, ui)
{
if(ui.item.val == -1)
{
return false;
}
//Get Selected Value
//alert(ui.item.val);
}
});
}
</script>
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<div class="ui-widget">
<label for="tbAuto"> UserName: </label>
<input type="text" id="Search" class="autosuggest" /> </div>
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder>
</div>
</form>
</body>
</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.

using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Services;
namespace _9_nov_search_box_auto_suggetion
{
[System.Web.Script.Services.ScriptService]
public class AutoCompleteService: System.Web.Services.WebService
{
[WebMethod]
public List < string > GetAutoCompleteData(string name)
{
List < string > result = new List < string > ();
using(SqlConnection con = new SqlConnection("Data Source=192.168.3.48;Initial Catalog=vikram;User ID=sa;Password=Atharvana01"))
{
using(SqlCommand cmd = new SqlCommand("select DISTINCT name from people1 where name LIKE '%'+@SearchText+'%'", con))
{
con.Open();
cmd.Parameters.AddWithValue("@SearchText", name);
SqlDataReader dr = cmd.ExecuteReader();
while(dr.Read())
{
result.Add(dr["name"].ToString());
}
return result;
}
}
}
}
}

Step 5: Add a new webform1.aspx.

Paste below code in webform1.aspx.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="_9_nov_search_box_auto_suggetion.WebForm1" MasterPageFile="~/Site1.Master" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<p>Child Page</p>
</asp:Content>