Description:
Autocomplete plugin provides suggestions
while we type into the field. Suggestions will retrieve from the database by
AJAX calls based on the user input.
Autocomplete feature used to build highly
interactive web applications and it will increase website usability.
When user types value in the input field, autocomplete
event is called and we are calling web method via AJAX.
Webmethod returns list of string values and
jquery are accessed the return values using data.d.
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-ui-1.10.3.custom.js"></script>
<link href="jquery-ui-1.10.3.custom" rel="Stylesheet"
type="text/css"
/>
3. Once the
document is ready, initialize Autocomplete widget with the textbox.
$(document).ready(function () {
$("#TextBox1").autocomplete();
});
4. While calling AJAX method through JQuery,
the method should be static and it should be web method.
Example program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<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.10.2/jquery.min.js">
</script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#TextBox1").autocomplete({
minLength: 2,
source: function (request, response)
{
$.ajax({
url: "AutoComplete.aspx/FetchPlaces",
data: "{
'input': '" +
request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json;
charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
value: item.City
}
}))
},
error: function (XMLHttpRequest,
textStatus, errorThrown) {
alert(textStatus);
}
});
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
Code Behind:
[System.Web.Services.WebMethod]
public static List<places> FetchPlaces(string input)
{
List<places> places = new List<places>();
SqlConnection con = new SqlConnection("Data Source=----;Initial
Catalog=dbname;User ID=uid;Password=pwd;");
SqlCommand cmd = new SqlCommand("select * from autocomplete where City
like '%" +
input + "%'", con);
con.Open();
SqlDataReader dr;
dr = cmd.ExecuteReader();
while (dr.Read())
{
places item = new places();
item.City = Convert.ToString(dr["City"]);
places.Add(item);
}
return places;
}
public class places
{
public string City { get; set; }
}
Autocomplete textbox using Jquey,
Jquery Autocomplet Textbox with Asp.net, Jquery Autocomplete textbox in
asp.net, Populate Autocomplete textbox using Jquery, Getting Autocomplete
Textbox value
0 comments:
Post a Comment