AJAX Autocomplete with On mouse over

Hi AJAX xperts,

I have AJAX autocomplete Textbox, which is a user control. i am getting employee details into this text box. upon typing 3 chars it will fetch 20 records which matchs with the prefix text.

I modified _highligted function(item) in Autocomplete.js in order to store emp fullname in window.status .

upon mouse over on this list i need populate employee details like dept, empid, empmanager, empcost center

here is my autocomplese.asmx C# code :

public string[] GetCompletionList(string prefixText, int count)
{
if (count == 0)
{
count = 10;
}

string peopledata = ConnectionStrings.GetConnectionString("Peopledata");
using (SqlConnection ConnStr = new SqlConnection(peopledata))
{
ConnStr.Open();
SqlCommand sqlcmd = new SqlCommand("GetPeopleDetails", ConnStr);
sqlcmd.Parameters.Add("@dotnet.itags.org.prefixText", SqlDbType.VarChar, 50).Value = prefixText + "%";
sqlcmd.CommandType = CommandType.StoredProcedure;
SqlDataAdapter da = new SqlDataAdapter(sqlcmd);
DataTable dt = new DataTable();
da.Fill(dt);
DataSet ds = new DataSet();
da.Fill(ds);

string[] items = new string[dt.Rows.Count];
int i = 0;
List<String> PeopleData = new List<string>();
foreach (DataRow dr in dt.Rows)
{

items.SetValue(dr["EmpFullName_MngrName"].ToString(), i);

PeopleData.Add(dr["NBKid"].ToString());
PeopleData.Add(dr["PersonNo"].ToString());
PeopleData.Add(dr["CostCenter"].ToString());
PeopleData.Add(dr["Hierarchy"].ToString());

i++;
}
//return PeopleData.ToArray();
return items;
}//end of sqlconnection

} //end of GetCompletionList

here is my java script code:

var obj;
function GetDataViaAJAX()
{
try
{
obj = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
obj = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e1)
{
obj = null;
}
}
if(obj!=null)
{
obj.onreadystatechange = ProcessResponse;
obj.open("POST", "http://localhost/Autocomplete.asmx/GetEmployeeDetails");
obj.setRequestHeader("Host","localhost");
obj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
obj.setRequestHeader("Content-Length","12");
obj.send("Name=" + document.getElementById("lblNamevalue").value);
}
return false;
}

function ProcessResponse()
{
if(obj.readyState == 4)
{
if(obj.status == 200)
{
var dsRoot=obj.responseXML.documentElement;
var ddlOrders = document.getElementById("ListBox1");
for (var count = ddlOrders.options.length-1; count >-1; count--)
{
ddlOrders.options[count] = null;
}
var orders = dsRoot.getElementsByTagName('orderid');
var text;
var listItem;
for (var count = 0; count < orders.length; count++)
{
text = (orders[count].textContent || orders[count].innerText || orders[count].text);
listItem = new Option(text, text, false, false);
ddlOrders.options[ddlOrders.length] = listItem;
}
}
else
{
alert("Error retrieving data!" + obj.status);
}
}
}
function SetValue()
{
var selectedvalue=document.getElementById("ListBox1").value;
document.getElementById("Hidden1").value=selectedvalue;
return true;
}

Can anyone help me on this plzzzz......Is it possible to work this functionality with Autocomplete

Hi,

I think you've almost implemented it. And you just need to call this method just after the _highlightItem method in _onListMouseOver.

Hi wen,

I dnt know why IE is throwing me an error in status bar. saying Syntax error.

I have hardcoded person number in autocomplete.js in order to get results, but when it hit GetDataViaAjax(personNo) functoin, it has to pop up alert which i added at the entry point. for my surprise its poping up insted throwing me error in IE status bar as Syntax error..

I am passing person number to FetchEmployeeDetails.aspx in order to fetech details. then i am returning as XML string. once i get XML string i am manipulating in JavaScirpt as follows. plz help me am i missing any thing.

Well beside if i add my function after _onListMouseOver, how do i get ite,.node.value in autocomplete.js ?

Appreciate your help on this

<script language="javascript"
///<summary>
/// This function manually added by krishna, in order to get EMP details.
///</summary
var obj;
function GetDataViaAjax(personNo)
{
alert(personNo);

try
{
obj = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
alert(e);
return;

try
{
obj = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e1)
{

obj = null;
}
}
if(obj!=null)
{
obj.onreadystatechange = ProcessResponse;
obj.open("GET", "http://localhost:3024/0rbit/PeopleSelector_UCR/FetchEmployeeDetails.aspx?personNo=" + myPersonNo, true);
obj.send(null);
}
return false;
}
}

//this is ur call back function
function ProcessResponse()
{

if(obj.readyState == 4)
{
if(obj.status == 200)
{
// this is return part form the ajax call page.
// you qry the database and get the person details in xml format.

var dsRoot=obj.responseXML.documentElement;
alert(obj.responseXML.documentElement);
return;

//get the data from the xml
var oName = dsRoot.getElementsByTagName('lblNameValue');
var oStandardID = dsRoot.getElementsByTagName('lblStandardIDvalue');
var oPersonNo = dsRoot.getElementsByTagName('lblpersonNovalue');
var oHeiarchy = dsRoot.getElementsByTagName('lblHeirarchyValue');
var oCostCenter = dsRoot.getElementsByTagName('lblCostCenterValue');
var oManager = dsRoot.getElementsByTagName('lblManagerValue');


var sName = (oName.textContent || oName..innerText || oName.text);
var sStandardID = (oStandardID.textContent || oStandardID..innerText || oStandardID.text);
var sPersonNo = (oPersonNo.textContent || oPersonNo..innerText || oPersonNo.text);
var sHeiarchy = (oHeiarchy.textContent || oHeiarchy..innerText || oHeiarchy.text);
var sCostCenter = (oCostCenter.textContent || oCostCenter..innerText || oCostCenter.text);
var sManager = (oManager.textContent || oManager..innerText || oManager.text);

var lblName = document.getElementById("GetPeopleList1_lblNameValue");
var lblStandardID = document.getElementById("GetPeopleList1_lblStandardIDvalue").innerHTML;
var lblPersonNo = document.getElementById("GetPeopleList1_lblpersonNovalue").innerHTML;
var lblHeiarchy = document.getElementById("GetPeopleList1_lblHeirarchyValue").innerHTML;
var lblCostCenter = document.getElementById("GetPeopleList1_lblCostCenterValue").innerHTML;
var lblManager = document.getElementById("GetPeopleList1_lblManagerValue").innerHTML;

if(lblName) {lblName.innerHTML = sName; }
if(lblStandardID){lblStandardID.innerHTML = sStandardID;}
if(lblPersonNo){lblPersonNo.innerHTML = sPersonNo;}
if(lblHeiarchy){lblHeiarchy.innerHTML = sHeiarchy;}
if(lblCostCenter){lblCostCenter.innerHTML = sCostCenter;}
if(lblManager){lblManager.innerHTML = sManager;}


}
else
{
alert("Error retrieving data!" );
}
}
}

</script>

If you get an error on the line "alert(personNo)", it's very likely that personNo is null. You may confirm this by double click the error icon in that status bar. If this is the cause, you need to check the code that calls the GetDataViaAjax method to make sure a valid personNo is passed in.

I noticed that in your code, a GET request is send to a .aspx page, so please make sure the response of this request is a XML document. This can be verified by pasting the url "http://localhost:3024/0rbit/PeopleSelector_UCR/FetchEmployeeDetails.aspx?personNo=aPersonNo" in to IE. And you can useXMLDom on client side to process the response.

Hi raymond,

thanks again for your post,

you are right i am redirecting to aspx in order to fetch results,

here is the code in aspx page, in the final am returning XML

DataSet ds = new DataSet();
string peopledata = ConnectionStrings.GetConnectionString("Peopledata");
using (SqlConnection ConnStr = new SqlConnection(peopledata))
{
ConnStr.Open();
SqlCommand sqlcmd = new SqlCommand("GetEmployeeDetails", ConnStr);
sqlcmd.Parameters.Add("@.PersonNO", SqlDbType.VarChar, 50).Value = Request.QueryString["personNo"];
//sqlcmd.Parameters.Add("@.PersonNO", SqlDbType.VarChar, 50).Value = "10525119";
sqlcmd.CommandType = CommandType.StoredProcedure;
SqlDataAdapter da = new SqlDataAdapter(sqlcmd);
da.Fill(ds, "Employees");

Response.Clear();
Response.ContentType = "text/xml";
Response.Write(ds.GetXml());
Response.End();
ConnStr.Close();

As of now am sending personNo (a hardcoded value) from Autocomplete.js as GetDataViaAjax("10525119")

Once page returns from FetchemployeeDetails.aspx , i could not see anything.

Well you are taking about XMLDOM, when i am returning XML from ASPX page do i need to parse it again at client side ?

krishnanellutla:

Well you are taking about XMLDOM, when i am returning XML from ASPX page do i need to parse it again at client side ?

Yes but not necessary. XMLDom gives you a convenient way to process it. You could also process it via your own method just like processing some text.

HI raymond,

I could able to display details for the hardcoded value in Autocomplete.js.

I am passing a hardcoded value from Autocomplete.js as GetDataViaAjax("123456789" ); based on this value i am querying database to fetech details and returning XML dcoument on the client side, with ProcessResponse function iam storing details for respective label controls (i took Labels and a panel, for displaying details) .

Now as my code in Autocomplete.asmx returns Employee Fullname, i cannot fetech details based on this fullname. In order to fetch details i have to pass person number to GetDataviaAjax function some thing like GetDataViaAjax(item.firstChild.nodeKeyValue ).

According to thisArticle , if we able to send a key value along with empfullname. my task will be get too easy for dispalying details. I am not sure how it is going to work, but i am gonna work on it.. lets see how it goes

appreciate your prompt responses on this..Thanks bdy !!!

HI Raymond,

Well one more, As of now i am fetching from FetchEmployeeDetails.aspx page, instead of this i would like to use web service (Autocomplete.asmx ) where i would like to add my method in web service. this autocomplete functionality is in User control page.

once again, am pasting whole code for your reference:

JavaScript in GetPeopleDetails.ascx page:

<script language="javascript"
///<summary>
/// This function manually added by krishna, in order to get EMP details.
///</summary
var obj;
function GetDataViaAjax(personNo)
{
var oURLAddress;
var sURLAddress

oURLAddress = document.getElementById("GetPeopleList1_UrlAddress");
if (oURLAddress)
{
sURLAddress = oURLAddress.value;
alert(sURLAddress);
}

try
{

if (window.XMLHttpRequest)
{
// If IE7, Mozilla, Safari, and so on: Use native object.
obj = new XMLHttpRequest();
if(obj!=null)
{
obj.onreadystatechange = ProcessResponse;
obj.open('GET', sURLAddress + 'FetchEmployeeDetails.aspx?personNo=' + personNo, true);
alert("I am Inside XMLHttpRequest");
obj.send(null);
}
}
else if (window.ActiveXObject)
{
// ...otherwise, use the ActiveX control for IE5.x and IE6.
obj = new ActiveXObject('MSXML2.XMLHTTP.3.0');
if(obj!=null)
{
obj.onreadystatechange = ProcessResponse;
obj.open('GET', sURLAddress + 'FetchEmployeeDetails.aspx?personNo=' + personNo, true);
alert("I am Inside ActiveXObject");
obj.send();
}
}

}
catch(e)
{
try
{
obj = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(e1)
{

obj = null;
}
}
return false;
}

function ProcessResponse()
{

if(obj.readyState == 4)
{
if(obj.status == 200)
{
// this is return part form the ajax call page.
// you qry the database and get the person details in xml format.
try
{
var dsRoot=obj.responseXML.documentElement;
alert("XML Processed !!!") ;

//get the data from the xml
var oName = dsRoot.getElementsByTagName('EmpFullName')[0].childNodes[0].nodeValue;
var oStandardID = dsRoot.getElementsByTagName('NBKid')[0].childNodes[0].nodeValue;
var oPersonNo = dsRoot.getElementsByTagName('PersonNo')[0].childNodes[0].nodeValue;
var oHeiarchy = dsRoot.getElementsByTagName('Hierarchy')[0].childNodes[0].nodeValue;
var oCostCenter = dsRoot.getElementsByTagName('CostCenter')[0].childNodes[0].nodeValue;
var oManager = dsRoot.getElementsByTagName('MngrFullName')[0].childNodes[0].nodeValue;


var sName = (oName.textContent || oName.innerText || oName.text || oName);
var sStandardID = (oStandardID.textContent || oStandardID.innerText || oStandardID.text || oStandardID);
var sPersonNo = (oPersonNo.textContent || oPersonNo.innerText || oPersonNo.text || oPersonNo);
var sHeiarchy = (oHeiarchy.textContent || oHeiarchy.innerText || oHeiarchy.text || oHeiarchy);
var sCostCenter = (oCostCenter.textContent || oCostCenter.innerText || oCostCenter.text || oCostCenter);
var sManager = (oManager.textContent || oManager.innerText || oManager.text || oManager);

var lblName = document.getElementById("GetPeopleList1_lblNameValue");
var lblStandardID = document.getElementById("GetPeopleList1_lblStandardIDvalue");
var lblPersonNo = document.getElementById("GetPeopleList1_lblpersonNovalue");
var lblHeiarchy = document.getElementById("GetPeopleList1_lblHeirarchyValue");
var lblCostCenter = document.getElementById("GetPeopleList1_lblCostCenterValue");
var lblManager = document.getElementById("GetPeopleList1_lblManagerValue");

if(lblName) {lblName.innerHTML = sName; }
if(lblStandardID){lblStandardID.innerHTML = sStandardID;}
if(lblPersonNo){lblPersonNo.innerHTML = sPersonNo;}
if(lblHeiarchy){lblHeiarchy.innerHTML = sHeiarchy;}
if(lblCostCenter){lblCostCenter.innerHTML = sCostCenter;}
if(lblManager){lblManager.innerHTML = sManager;}

}

catch(e2)
{
alert(e2);
}

}
else
{
alert(obj.responseXML.documentElement);
alert("Status = " + obj.status);
alert("Error retrieving data!" );
}
}
}

</script>

-------------------------------

Autocomplete.asmx code which get results for FullNames :

string peopledata = ConnectionStrings.GetConnectionString("Peopledata");
using (SqlConnection ConnStr = new SqlConnection(peopledata))
{
ConnStr.Open();
SqlCommand sqlcmd = new SqlCommand("GetPeopleDetails", ConnStr);
sqlcmd.Parameters.Add("@.prefixText", SqlDbType.VarChar, 50).Value = prefixText + "%";
sqlcmd.CommandType = CommandType.StoredProcedure;
SqlDataAdapter da = new SqlDataAdapter(sqlcmd);
DataTable dt = new DataTable();
da.Fill(dt);
DataSet ds = new DataSet();
da.Fill(ds);
string[] items = new string[dt.Rows.Count];
int i = 0;

foreach (DataRow dr in dt.Rows)
{
items.SetValue(dr["EmpFullName_MngrName"].ToString(), i);
i++;
}

//return PeopleData.ToArray();
return items;

-------------------------------

Code in FetchemployeeDetails.aspx

string personNo = Request.QueryString["personNo"];

DataSet ds = new DataSet();
string peopledata = ConnectionStrings.GetConnectionString("Peopledata");
using (SqlConnection ConnStr = new SqlConnection(peopledata))
{
ConnStr.Open();
SqlCommand sqlcmd = new SqlCommand("GetEmployeeDetails", ConnStr);
sqlcmd.Parameters.Add("@.PersonNO", SqlDbType.VarChar, 50).Value = personNo;
//sqlcmd.Parameters.Add("@.PersonNO", SqlDbType.VarChar, 50).Value = "10525119";
sqlcmd.CommandType = CommandType.StoredProcedure;
SqlDataAdapter da = new SqlDataAdapter(sqlcmd);
da.Fill(ds, "Employees");

Response.Clear();
Response.ContentType = "text/xml";
Response.Write(ds.GetXml());
Response.End();
ConnStr.Close();

}

-------------------------------

Well in the java script i am calling this FetchemployeeDetails in order to get Employee Details using XMLhttprequest.

intead of going to this aspx page, i would like to put this method in webservice method, and call this method and process accordingly..

So far i never done calling a web service method from java script , can you please help me in modfying this part.

appreciate your help on this..

Thanks in advance

Hi experts,

I am trying to do this whole functionality to a web control library, i added a new instance for AutocompleteExtender in my class. but i could able to find TargetControlID property for this. Can any one help me on this