Autosuggestion, autocomplete textbox data from server(using ajax.dll)

lt;style type="text/css">
.Table
{
background-color:yellow;
font-family:Verdana;
font-size:10px;
width:200px;
}
.DefaultRowColor
{background-color:gray;
}
.HighlightRow

{background-color:#eeeeee;
}
</style>
</

head><

body>
<form id="form1" runat="server">
<div><

script language="javascript" type="text/javascript">var

word ='';
var

UP = 38; var

DOWN = 40; var

ENTER = 13;var

index = -1; var

TAB = 9; var

BACKSPACE = 8; var

table = null; var
rows = null;var
selectedRow = null;function
GetProducts(e)
{var
keynumvar

keycharvar

numcheckif

(window.event)// IE
{keynum = e.keyCode
}
else

if(e.which)// Netscape/Firefox/Opera
{keynum = e.which
}
keychar = String.fromCharCode(keynum)
numcheck = /d/
// If the down key is pressed
if

(keynum == DOWN)
{MoveCursorDown();
return;
}
else

if(keynum == UP)
{MoveCursorUp();return;
}
else

if(keynum == ENTER)
{if(IsFireFox())
{document.getElementById("txtSearch").value = selectedRow.childNodes[1].innerHTML;
}
else
{document.getElementById("txtSearch").value = selectedRow.innerText;
}
document.getElementById("results").innerHTML = '';
// false is returned so that the postback won't occur when the return key is pressedreturn false;
}if

(keynum != DOWN && keynum != UP && keynum >= 65 && keynum <= 90)
{ index=-1;
word = word + keychar;
}
else
if(keynum == BACKSPACE)
{index=-1;word=document.getElementById("txtSearch").value;
word = word.substring(0,word.length-1);
}
// Call the server side method

auto.GetSearhItmes(word,RecieveServerData_CallBack);
}function
IsFireFox()

{return (navigator.appName == 'Netscape');
}
function
MoveCursorUp(){
selectedRow = null;
table = document.getElementById("MyTable");
if(table == null) return;
rows = table.getElementsByTagName("TR");
if(index > 0)
{index--;SetDefaultRowColor();
selectedRow = rows[index];
selectedRow.className = 'HighlightRow'
}
}function

MoveCursorDown()
{selectedRow = null;
table = document.getElementById("MyTable");
if(table == null) return;
rows = table.getElementsByTagName("TR");
if(index < rows.length)
{
if(index < rows.length -1)
{index++;
SetDefaultRowColor();
selectedRow = rows[index];
selectedRow.className = 'HighlightRow';
}}}function

SetDefaultRowColor()
{for(i=0;i<rows.length;i++)
{rows[i].className = 'DefaultRowColor';
}
}function

RecieveServerData_CallBack(response)
{ var ds = response.value;
if(ds==null)
{document.getElementById("results").style.visibility="hidden";
}
elseif(ds != null && typeof(ds) == "object" && ds.Tables != null)
{var s = new Array();
s[s.length] = "<table border='0' cellpadding='0' cellspacing='0' id='MyTable' class='Table'>";
for(var i=0; i<ds.Tables[0].Rows.length; i++)
{s[s.length] = "<tr>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].keywordname + "</td>";
s[s.length] = "</tr>";
}s[s.length] = "</table>";
//tableDisplay.innerHTML = s.join("");
document.getElementById("results").innerHTML =s.join("");
document.getElementById("results").style.visibility="visible";
}
else
{alert("Error. [3001] " + response.request.responseText);
}}</

script>

Enter Search Text: <input type="text" onkeydown="return GetProducts(event)" id="txtSearch" name="txtSearch" autocomplete=off />

<div id=results></div>
auto.aspx.cs codebehind file
using
System;using
System.Data;using System.Data.SqlClient;using
System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using
System.Web.UI;using
System.Web.UI.WebControls;using
System.Web.UI.WebControls.WebParts;using
System.Web.UI.HtmlControls;public
partial class auto : System.Web.UI.Page{SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connect"].ConnectionString);protected void Page_Load(object sender, EventArgs e)
{Ajax.Utility.RegisterTypeForAjax(typeof(auto));
}
[Ajax.AjaxMethod()]
public DataSet GetSearhItmes(string str)
{DataSet ds = new DataSet();
if (str.Length > 0)
{SqlDataAdapter da = new SqlDataAdapter("select keywordname from keyword where keywordname like @text+'%'", con);
da.SelectCommand.Parameters.Add("@text", SqlDbType.VarChar).Value = str;
da.Fill(ds);}
else
ds = null;
return ds;
}
}

• Facebook
• Twitter
• Google+
• Pinterest
• StumbleUpon
• Dig
• LinkedIn