JQuery AutoComplete
Extender:
AutoComplete is an ASP.NET with JQuery extender that can be attached to any
TextBox control, and will associate that control with a popup panel to display
words that begin with the prefix typed into the textbox.
The dropdown with
candidate words supplied by a web service is positioned on the bottom left of
the text box.
Below is the Page design.
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
SearchText();
});
function
SearchText() {
$(".autosuggest").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json;
charset=utf-8",
url: "SecoundPage.aspx/GetAutoCompleteData",
data: "{'username':'" +
document.getElementById("<%= txtComponent.ClientID%>").value + "'}",
dataType: "json",
success: function (data) {
//JQuery autocomplete extender result data
response(data.d);
},
error: function (result) {
alert("Error");
}
});
}
});
}
function
JustTesting(str) {
document.getElementById("content").innerHTML = '<b>Description
:</b> ' +
str.value;
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cntMain" runat="Server">
<div class="demo">
<div class="ui-widget">
<label for="tbAuto">Enter Component Name:
</label>
<asp:TextBox runat="server" ID="txtComponent" CssClass="autosuggest" Style="width: 600px;" />
<div id="content" height="30px" class="SelectRow1" align="left"></div>
</div>
</asp:Content>
JQuery
Code:
<script type="text/javascript">
$(document).ready(function () {
SearchText();
});
function
SearchText() {
$(".autosuggest").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json;
charset=utf-8",
url: "SecoundPage.aspx/GetAutoCompleteData",
data: "{'username':'" +
document.getElementById("<%= txtComponent.ClientID%>").value + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Error");
}
});
}
});
}
function
JustTesting(str) {
document.getElementById("content").innerHTML = '<b>Description
:</b> ' +
str.value;
}
</script>
</script>
This is the function
declaration of JSON format we are using this JSON function
to call web methods using JQuery $.ajax() whenever we need to
make Ajax call with JQuery then we will use JSON functions like as we mentioned
in above format. Here type, ContentType and dataType are
same for all functions only url, data and success functions
will vary based on our requirement.
URL: This is the path of our Webmethods
Data: we will pass parameters using this parameter
if no parameters then we need to use data: "{}"
Success: Once our web method execution completed then
success function will execute and return username matching’s
[WebMethod]
public static List<string> GetAutoCompleteData(string username)
{
SqlCommand drCommand;
// SqlConnection con = new
SqlConnection(ConfigurationManager.ConnectionStrings["dbconnection"].ToString());
SqlConnection conHiAll = new SqlConnection("server=LocalHost;database=DBName;uid=sa;pwd=gplhyd0;MultipleActiveResultSets=True");
conHiAll.Open();
drCommand = new SqlCommand("select Component_Desc from tbl1 where
Component_Desc like '" + username + "%'", conHiAll);
//drCommand.Parameters.AddWithValue("@Name",
prefixText);
SqlDataAdapter da = new SqlDataAdapter(drCommand);
DataTable dt = new DataTable();
da.Fill(dt);
List<string> CountryNames = new List<string>();
for (int i = 0; i <
dt.Rows.Count; i++)
{
CountryNames.Add(dt.Rows[i][0].ToString());
}
return CountryNames;
}
No comments:
Post a Comment