jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.
In this article, I will show you how to implement AutoComplete feature in ASP.NET using JQuery.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<title></title>
<style type="text/css">
.listbox
{
position: relative;
left: 10px;
margin: 10px;
width: 200px;
background-color: #000;
color: #fff;
border: 2px solid #000;
}
.nameslist
{
margin: 0px;
padding: 0px;
list-style: none;
}
.hover
{
background-color: Teal;
color: blue;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.listbox').hide();
$('#country').keyup(function() {
var country = $('#country').val();
$.ajax({
type: "POST",
url: "Default.aspx/User",
data: "{'country': '" + country + "'}",
dataType: "json",
contentType: "application/json",
success: function(html) {
$('.listbox').show();
$('.nameslist').html(html.d);
$('li').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
$('li').click(function() {
$('#country').val($(this).text());
$('.listbox').hide();
});
}
});
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<span class="label">Enter Country Name</span>
<input type="text" name="country" id="country" />
<div class="listbox">
<div class="nameslist">
</div>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Services.WebMethod]
public static string User(string country)
{
Country objCountry = new Country();
var query = from p in objCountry.GetList()
where p.CountryName.ToLower().StartsWith(country.ToLower())
select p;
StringBuilder sb = new StringBuilder();
foreach (var item in query)
{
sb.Append("<li>" + item.CountryName + "</li>");
}
return sb.ToString();
}
}
public class Country
{
public int ID { get; set; }
public string CountryName { get; set; }
public List<Country> GetList()
{
List<Country> list = new List<Country>()
{
new Country(){ID=1,CountryName="Inida"},
new Country(){ID=2,CountryName="USA"},
new Country(){ID=3,CountryName="UK"},
new Country(){ID=4,CountryName="Australia"},
new Country(){ID=5,CountryName="Newzeland"}
};
return list;
}
}
Tags:
Jquery