Autocomplete value using xmlHttpRequest

Engineerachu
Posted by Engineerachu under JavaScript category on | Views : 4575
aspx :
<div>       
<asp:TextBox ID="txtSample" runat="server" />
</div>

<div id="divFilterData">
<ul id="ulData">
</ul>
</div>


On the textbox keyup event, the "FetchAutoComplete" method is called to fetch the values from database in json format.
javascript :

<script type="text/javascript">

$("#ulData li").live("click", function(e) {
$("#txtSample").val($(this).text());
$("#divFilterData").HideControl();
});
$("#txtSample").live("keyup", function(e) {
if (e.keyCode != 40 && e.keyCode != 13 && e.keyCode != 38) {
FetchAutoComplete();
}
});
function FetchAutoComplete() {
var txtSampleValue = $.trim($('#txtSample').val())
if ($.trim(txtSampleValue) != '') {
var params = "nameWith=" + txtSampleValue;

var xmlHttp;
try {
xmlHttp = new XMLHttprequest();
}
catch (e) {
try {
xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e) {
try {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e) {
alert('No Ajax support');
return false;
}
}
}
xmlHttp.open("POST", "XmlHttpRequest.aspx?m=GetAutoCompleteValues");
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", params.length);
xmlHttp.setRequestHeader("Connection", "close");

xmlHttp.send(params);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
BindTable(xmlHttp.ResponseText)
}
}
}
else {
$("#divFilterData").HideControl();
$("#ulData").empty();
}
}
function BindTable(data) {
var tableValue = data;
tableValue = tableValue.slice(0, tableValue.length - 1);
try {
tableValue = $.parseJSON(tableValue);
$("#ulData").empty();
$("#divFilterData").ShowControl();
$.each(tableValue.Super, function() {
$("#ulData").append("<li style='width:100%;'>" + this.Name + "</li>");
});
}
catch (msg) {
$("#divFilterData").HideControl();
$("#ulData").empty();
}
}

$("#ulData li").live("mouseover", function(elem, index) {
$(this).ListHoverIn();
});
$("#ulData li").live("mouseout", function() {
$(this).ListHoverOut();
});
var active = -1;
// When Up arrow or Down arrow is clicked, the item in the list is selected
$("#txtSample").live("keydown", function(e) {
switch (e.keyCode) {
case 38:
e.preventDefault();
moveSelect(-1);
break;
case 40:
e.preventDefault();
moveSelect(1);
break;
case 13:
e.preventDefault();
selectItem();
break;
default:
active = -1;
break;
}
});
// When "Enter" is clicked, it assigns the value in the textbox
function selectItem() {
$("#txtSample").val($(lis[active]).text());
$("#divFilterData").HideControl();
}
var lis;
function moveSelect(step) {
lis = $("li", "#ulData");

if (!lis) return;
active += step;
if (active < 0) {
active = 0;
}
else if (active >= lis.length) {
active = lis.length - 1
}
lis.css('background-color', 'transparent');
$(lis[active]).css('background-color', '#9cbdcd');
$("#txtSample").val($(lis[active]).text());

}
jQuery.fn.extend({
HideControl: function() {
return $(this).css("display", "none");
},
ShowControl: function() {
return $(this).css("display", "block");
},
ListHoverIn: function() {
return $(this).css('background-color', '#9cbdcd');
},
ListHoverOut: function() {
return $(this).css('background-color', 'transparent');
}
});
</script>



c# :

SqlConnection conn = new SqlConnection("Server=.\\SQLExpress; Initial Catalog=Sample; UId=achu; Pwd=achu");
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["m"] != null && Request.QueryString["m"].ToString() == "GetAutoCompleteValues")
{
ShowAutoSuggest();
}
}

private void ShowAutoSuggest()
{
Response.Clear();
StringBuilder sbList = new StringBuilder();
string sNameWith = Request.Params["nameWith"].ToString();
// Get result from database & assign it to a DataTable dt
dt.TableName = "Super";
string sJson = GetJSONString(dt);

Response.Write(sJson);
Response.End();
}
public static string GetJSONString(DataTable Dt)
{
// check this link
//http://weblogs.asp.net/navaidakhtar/archive/2008/07/08/converting-data-table-dataset-into-json-string.aspx
//to convert datatable to json
}

Comments or Responses

Login to post response