In this example we explain that how to implement auto
suggestion search textbox or auto complete textbox in master page in asp.net. Or
auto complete textbox in asp.net master page using jQuery with web service.
Simply we already explain that how to autocomplete
textbox or auto suggestion in textbox in asp.net but here we use master page
with jQuery web service.so how to implement jQuery autocomplete in master page
with its content page using web service in jQuery.
<%@
Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>jquery
autocomplete textbox example with master page in asp.net</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
() {
alert("call");
SearchText();
});
function
SearchText() {
$(".autosuggest").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebService.asmx/GetAutoCompleteCountry",
data: "{'country':'" + $('#txtcountry').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}]);
$('#txtcountry').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">
Master Page
<div class="ui-widget">
<label for="tbAuto">
Country:
</label>
<input type="text" id="txtcountry" class="autosuggest" />
</div>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Webservice Code:
using
System.Collections.Generic;
using
System.Data.SqlClient;
using
System.Web.Services;
/// <summary>
///
Summary description for AutoCompleteService
/// </summary>
[WebService(Namespace
= "http://tempuri.org/")]
[WebServiceBinding(ConformsTo
= WsiProfiles.BasicProfile1_1)]
// To allow this Web
Service to be called from script, using ASP.NET AJAX, uncomment the following
line.
[System.Web.Script.Services.ScriptService]
public class WebService :
System.Web.Services.WebService
{
[WebMethod]
public List<string>
GetAutoCompleteCountry(string country)
{
List<string> lstcountry = new
List<string>();
List<string> lstcountry1 = new
List<string>();
lstcountry.Add("India");
lstcountry.Add("Ireland");
lstcountry.Add("Indonesia");
lstcountry.Add("Iran");
lstcountry.Add("Iraq");
lstcountry.Add("Iceland");
foreach
(var item in
lstcountry)
{
if(item.StartsWith(country))
{
lstcountry1.Add(item);
}
}
return
lstcountry1;
}
}
ChildPage:
<%@
Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" %>
<asp:Content ID="Content1"
ContentPlaceHolderID="ContentPlaceHolder1"
runat="server">
<p>Child Page</p>
</asp:Content>
0 comments:
Post a Comment