I already posted ajax autocomplete and jquery autocomplete Its the time to Custom autocomplete :). Advantage of custom is v can have a full control over that and its upto us which and what should display and its awesome to work around that.
CODE
<%@ 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">
<title></title>
<style type="text/css">
div
{
width: 150px;
height: auto;
border: 1px dotted red;
z-index: 9999px;
position: absolute;
background-color: #CCCCFF;
filter: alpha(opacity=65);
-moz-opacity: 0.65;
opacity: 0.65;
}
div#img
{
z-index: 9999px;
position: absolute;
filter: alpha(opacity=99);
-moz-opacity: 0.99;
opacity: 0.99;
}
tr:hover
{
color: red;
background:white;
border: 1px dotted red;
filter: alpha(opacity=99);
-moz-opacity: 0.99;
opacity: 0.99;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txtDemo" runat="server" onkeyup="txt(this.id);" onfocus="txt(this.id);" onblur="VanishDiv();" Width="150px"></asp:TextBox><br />
<div id="DIVname">
</div><br />
DEMO by:WWW.SIMPLYASP.BLOGSPOT.COM
</form>
<script type="text/javascript" src="Jqueryt.js"></script>
<script type="text/javascript">
function VanishDiv() {
$('#DIVname').empty();
}
function ind(d) {
$('#txtDemo').val(d.innerHTML);
}
function txt(value) {
var condition = $('#' + value).val();
var data = "Arun,Binu,Deepu,Sam,Nagarjuna,Samphu,Robin";
var a = data.split(',');
$('#DIVname').empty();
var t = "<table width='150px'>";
var c = a.length;
for (var i = 0; i < c; i++) {
var bool = a[i].search(condition);
if (bool != "-1") {
t = t + "<tr><td id=" + a[i] + " onkeyup='ind(" + a[i] + ");' onkeydown='ind(" + a[i] + ");' onmouseover='ind(" + a[i] + ");' onclick='ind(" + a[i] + ");'>" + a[i] + "</td></tr>";
}
}
t = t + "</table>";
$('#DIVname').append(t);
}
</script>
</body>
</html>
If u had any trouble just ask, Happy to help u :)
Stay Tune...
Have a nice day... 'N happy Coding :)
No comments:
Post a Comment