Wednesday, April 23, 2008

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;
}
}


4 comments :

  1. hi i run this coding it not working can u sent to my mail.

    ReplyDelete
  2. hi dude,
    what is "results" element?

    ReplyDelete
  3. Please Send me the runing version

    ReplyDelete
  4. Hello Friend,
    your Code is not working Give me Runing Code
    My EmailID: rahul_bu2006@yahoo.co.in

    ReplyDelete

AJAX, asp, Asp.net, asp.net and sql server security, Asp.net IntemIndex, C#, Css, DataBinder.Eval, DataKeyNames, Datalist, Datapager, DataSet, DataTable, DropDownList, FindControl, gridview, JavaScript, jquery, Listview, Paging, Regex, RegularExpression, Repeater, Server side validation, Sql Server, timer, timercallback, Validation, XML, xmlnode, XPath