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

Ajax AutoComplete with database, not working

Hello,

I am interested in implementing a search box which gives suggestions as you type. So, I downloaded the AjaxControlToolKit source code, I compiled the solution in VS 2005, and it is OK.

Then I modified the [WebMethod] public string[] GetCompletionList(string prefixText, int count) in an attempt to get the string array from a User table in my database.

I don't quite understand this WebMethod. for example,what is prefixText? My modified code is as follows.

1 [WebMethod]2public string[] GetCompletionList(string prefixText,int count)3 {4if (count == 0)5 {6 count = 10;7 }89if (prefixText.Equals("xyz"))10 {11return new string[0];12 }1314string connectionString ="localhost;Initial Catalog=myDatabase; User Id=myUserID; Password=topSecrect";15 SqlConnection sqlConnection =new SqlConnection(connectionString);16 sqlConnection.Open();17 SqlCommand sqlCommand =new SqlCommand("SELECT LASTNAME + ', ' + FIRSTNAME FROM USER AS FULLNAME ORDER BY LASTNAME", sqlConnection);18 SqlDataReader sdr = sqlCommand.ExecuteReader();1920 ArrayList fullNames =new ArrayList(count);2122while (sdr.Read())23 {24if (!sdr.IsDBNull(0))25 {26char c1 = (char)sdr.GetString(0)[0];27char c2 = (char)sdr.GetString(0)[1];28char c3 = (char)sdr.GetString(0)[2];29 fullNames.Add(prefixText + c1 + c2 + c3);30 }3132 }33return (string[])fullNames.ToArray(typeof(string));34 }

Please note that I do not quite understand the part in the for loop as in the original source code shown in blue below. So I am only mimicking the code.

// ArrayList items = new ArrayList(count);
// Random random = new Random();
// for (int i = 0; i < count; i++)
// {
// char c1 = (char)random.Next(65, 90);
// char c2 = (char)random.Next(97, 122);
// char c3 = (char)random.Next(97, 122);

// items.Add(prefixText + c1 + c2 + c3);
// }

Also please note, that the compilation of the solution with the modified code passed, and I can check out http://localhost:7870/ToolkitTests/AutoComplete.aspx just fine, but when I type in the first textbox of this AutoComplete.aspx page, no suggestions show up. The second textbox still works as usual.

The Sql query and connection string are both fine. I ran it in some other applications, they work without a problem.

Any hint is highly appreciated. Thanks.

The prefixText field are the characters that have been typed and are being queried, the count is the max number of records to return then updated with the number of records returned.

The Random... etc code, was just a way for the demo application to generate random data without attaching a database.

jguadagno:

The prefixText field are the characters that have been typed and are being queried, the count is the max number of records to return then updated with the number of records returned.

The Random... etc code, was just a way for the demo application to generate random data without attaching a database.

OK, thanks. My guess about the prefText argument was right. But, what's wrong with my modified code, which attempts to get the suggestions from the database?

Is there a way to get the suggestion list from a database? No one knows?

You have the code in the GetCompletionList. Is it not working. Remember the prefixText are the letters that the text box control has so far. So if the is a Country drop down list as user type U, the prefixText should get a U and you have to return a list of your options that start with U.

OK, I found a sample code at

http://forums.asp.net/p/1126189/1772074.aspx#1772074

By J. Shen, In order to test the dynamic SQL, I created a regular web application (NOT web service!) I just copied the part of the aforementioned code which gets the suggestions from the DB and modified like so:

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

if (prefixText.Equals("xyz"))
{
return new string[0];
}

string connectionString = "Data Source=localhost;Initial Catalog=mydatabase; User Id=myUserID; Password=TopSecret";
SqlConnection sqlConnection = new SqlConnection(connectionString);

SqlCommand sqlCommand = new SqlCommand
("SELECT TOP @.nrows LASTNAME " +
"FROM v_USER " +
"WHERE LASTNAME LIKE @.term " +
"ORDER BY LASTNAME", sqlConnection);
sqlCommand.Parameters.AddWithValue("@.nrows", count);
sqlCommand.Parameters.AddWithValue("@.term", prefixText + "%");

List<string> suggestions = new List<string>();
sqlConnection.Open();

SqlDataReader sdr = sqlCommand.ExecuteReader(System.Data.CommandBehavior.CloseConnection);

while (sdr.Read())
{
suggestions.Add(sdr[0].ToString());
}

sqlConnection.Close();
sdr.Close();

return suggestions.ToArray();

}

As you see, except the SQL, it's the same as that of J. Shen's. I call this method in Page_Load like so:

protected void Page_Load(object sender, EventArgs e)
{

string[] s = GetCompletionList("Joh", 10);
Response.Write(s.Length);
}

When I run the Web application. I always get this error:

Exception Details:System.Data.SqlClient.SqlException: Line 1: Incorrect syntax near '@.nrows'.

I am using SQL Server 2000, and obviously, the SQL query syntax isn't accepted by Sql Server 2000. I cannot figure out what's wrong with it. I am new to dynamic sql.

Any hint? Thanks.

The problem is with TOP @.nrows ... You can not have a variable for that. You can build the string prior to

string sql ="SELECT TOP " + count.ToString() +"LASTNAME FROM v_USER ";string sql +=" WHERE LASTNAME LIKE @.term ORDER BY LASTNAME ";SqlCommand sqlCommand =new SqlCommand(sql, sqlConnection);

Thank you very much, Joseph. That was the problem. It's working now. The sample code given by J. Shen completely misled me. I did not cast any doubt on his code because I took it for granted that it was a working sample.

I am glad it worked. Please mark it as "Answered" so that others will know the solution.

Hi All,

I have been trying to replicate this post in VB.net and I "think" I am almost there. I am stuck on a couple of small pieces and I'm begging for help. I have been trying to get the AJAX autocomplete to work off of a SQL database for many hours before I ran into this post which seems promising. I feel I'm at my ends.

I'm having trouble with the following lines, I'm tried to figure out what the code was trying to do but this is what I could come up with and its not working:
----------------------------------
Dim suggestionsAs ListItemCollection =New ListItemCollection(OfString)

While (reader.Read())
suggestions.Add(reader[0].ToString())
EndWhile

Return suggestions.ToArray
----------------------------------

Thanks in advance, I truely appreciate it.
Tim

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Collections.Generic
Imports System.Data.Sql
Imports System.Data.SqlClient

<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
<System.Web.Script.Services.ScriptService()> _

PublicClass AutoComplete
Inherits System.Web.Services.WebService

<WebMethod()> _

PublicFunction GetCompletionList(ByVal prefixTextAsString,ByVal countAsInteger)AsString()

If (count = 0)Then
count = 10
EndIf

Dim connAs SqlConnection
Dim commAs SqlCommand
Dim readerAs SqlDataReader
Dim connectionstringAsString = ConfigurationManager.ConnectionStrings("Magic").ConnectionString
Dim sqlAsString ="SELECT TOP " + count.ToString() +"LASTNAME FROM v_USER "

sql +=" WHERE LASTNAME LIKE @.term ORDER BY LASTNAME "

conn =New SqlConnection(connectionstring)
comm =New SqlCommand(sql, conn)
comm.Parameters.AddWithValue("@.nrows", count)
comm.Parameters.AddWithValue("@.term", prefixText +"%")

Dim suggestionsAs ListItemCollection =New ListItemCollection(OfString)

conn.Open()
reader = comm.ExecuteReader(System.Data.CommandBehavior.CloseConnection

While (reader.Read())
suggestions.Add(reader[0].ToString())
EndWhile

conn.Close()
reader.Close()

Return suggestions.ToArray

EndFunction
EndClass

With comments

''' Creates a list array

Dim suggestionsAs ListItemCollection =New ListItemCollection(OfString)

''' Opens the connection

conn.Open()

''' Creates a data reader
reader = comm.ExecuteReader(System.Data.CommandBehavior.CloseConnection

''' Loops through the data reader

While (reader.Read())

''' Adds the first column to the suggestions array

''' note: in VB this should read
suggestions.Add(reader(0).ToString())
EndWhile

''' close the objects

conn.Close()
reader.Close()

''' return the suggestion

Return suggestions.ToArray

Almost there...

I have everything compiling correctly, Visual Studio 05 isn't giving me any error messages but when I type in the textbox nothing happens. It must be linked incorrectly. I know the SQL statement works correctly because I ran it in Query Analyzer, and I know the connection string works because I have other data pulling so I think the function GetCompletionList isn't being passed any parameters for it to return a result.

If someone could explain the mapping so I can go back and verify everything on my end that would be good. Currently I have the autocompleteextender controlID set to my textbox. Other than that, the AJAX website knows to use the AutoComplete.asmx which then points to the App_Code/Autocomplete.vb right? Or does this have to be set manually or something.

Idea's?
Thanks!
Tim

The autocompleteextender needs to be configured like this

<ajaxToolkit:AutoCompleteExtender runat="server" ID="autoComplete1" TargetControlID="myTextBox" ServiceMethod="GetCompletionList" ServicePath="AutoComplete.asmx" MinimumPrefixLength="2" CompletionInterval="1000" EnableCaching="true" CompletionSetCount="20" CompletionListCssClass="autocomplete_completionListElement" CompletionListItemCssClass="autocomplete_listItem" CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" DelimiterCharacters=";, :"> <Animations> <OnShow> ... </OnShow> <OnHide> ... </OnHide> </Animations></ajaxToolkit:AutoCompleteExtender>

Note, the ServiceMethod and ServicePath properties. They need to be pointed to whereever your AutoComplete is.

Ajax Auto Sugest problem with LTR languages

Hi,I Use Ajax auto suggest text box. this autosuggest text box lookup throw table string field(nvarchar).It works find for Numbers and English words. But When I use LTR languages like arabic,the textbox does not show anything at all. I use UTF-8 and when I search this field it leads to correct results

but I don't know what is the problem with it.

Best regards,

Hi,

According to your description, it seems that ado.net fail to get data when use LTR languages.

I suspect this is a question regarding database. Please ask in this queue: http://forums.asp.net/54.aspx

Ajax Auto Complete Text Box

hi experts,

i am using the Ajax Auto Complete, i have used in the same way the Ajax Tool Kit has. The auto complete values are coming fine but the drop down window is transparent and i can see the control behind that. even the style sheet i have used the same way the example has but icant figure out what is the problem.

another problem is when i click enter in the text box(which is enabled for auto complete) i am getting an run time error 'this.postbacksettings.async' is null or not an object.

can any one help on this.

Thank you.

I had to double check. I do not have specific CSS attached to my AutoComplete. Are you using CSS friendly adapters? If you can post your text box, auto complete and snip it of CSS that would help.

hi,

i have followed this site,

http://asp.net/AJAX/Control-Toolkit/Live/AutoComplete/AutoComplete.aspx

and done the same way it has been said and downloaded the web application and used the css also whihc is given in this application. the CSS is

/*AutoComplete flyout */

.autocomplete_completionListElement
{
visibility :hidden;
margin :0px!important;
background-color :inherit;
color :windowtext;
border :buttonshadow;
border-width :1px;
border-style :solid;
cursor :'default';
overflow :auto;
height :100px;
text-align :left;
list-style-type :none;
}

/* AutoComplete highlighted item */

.autocomplete_highlightedListItem
{
background-color:#ffff99;
color:black;
padding:1px;
}

/* AutoComplete item */

.autocomplete_listItem
{
background-color :window;
color :windowtext;
padding :1px;
}

/*trial for the test*/

.ContextMenuPanel
{
border:1pxsolid#868686;
z-index:1000;
background:url(images/menu-bg.gif)repeat-y00#FAFAFA;
cursor:default;
padding:1px1px0px1px;
font-size:11px;
}

.ContextMenuBreak
{
margin:1px1px1px32px;
padding:0;
height:1px;
overflow:hidden;
display:block;
border-top:1pxsolid#C5C5C5;
}

a.ContextMenuItem
{
margin:1px01px0;
display:block;
color:#003399;
text-decoration:none;
cursor:pointer;
padding:4px19px4px33px;
white-space:nowrap;
}

a.ContextMenuItem-Selected
{
font-weight:bold;
}

a.ContextMenuItem:hover
{
background-color:#FFE6A0;
color:#003399;
border:1pxsolid#D2B47A;
padding:3px18px3px32px;
}

/*trial for the test*/

the code is

<AjaxToolkit:AutoCompleteExtender
runat="server"
BehaviorID="AutoCompleteEx"
id="autocomplete1"
targetcontrolid="txtAnswerDesc"
minimumprefixlength="1"
servicemethod="GetCompletionList"
servicepath="../Helpinfo.asmx"
CompletionInterval="1000"
EnableCaching="true"
CompletionSetCount="5"
CompletionListCssClass="autocomplete_completionListElement"
CompletionListItemCssClass="autocomplete_listItem"
CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
>
<Animations>
<OnShow>
<Sequence>
<%-- Make the completion list transparent and then show it --%>
<OpacityAction Opacity="0" />
<HideAction Visible="true" />

<%--Cache the original size of the completion list the first time
the animation is played and then set it to zero --%>
<ScriptAction Script="
// Cache the size and setup the initial size
var behavior = $find('AutoCompleteEx');
if (!behavior._height) {
var target = behavior.get_completionList();
behavior._height = target.offsetHeight - 2;
target.style.height = '0px';
}" />

<%-- Expand from 0px to the appropriate size while fading in --%>
<Parallel Duration=".4">
<FadeIn />
<Length PropertyKey="height" StartValue="0" EndValueScript="$find('AutoCompleteEx')._height" />
</Parallel>
</Sequence>
</OnShow>
<OnHide>
<%-- Collapse down to 0px and fade out --%>
<Parallel Duration=".4">
<FadeOut />
<Length PropertyKey="height" StartValueScript="$find('AutoCompleteEx')._height" EndValue="0" />
</Parallel>
</OnHide>
</Animations>
</ajaxtoolkit:autocompleteextender>

Anything else if you need let me know.

thank you.

I haven't had a chance to completely review this, however, on a quick look check out the background-color for both the ".autocomplete_completionListElement" and ".autocomplete_listItem" classes. The inherited and window options may be playing havoc especially if the browsers background color is set to transparant. Have you tried specifying a color in both of those classes?

thanks for your reply.

i have tried changing the background color and still i am seeing the controls behing the list item.

please help me to solve this.

Have you tried adding a div as target for autocomplete?

<divID="divAutoComp"></div>

And in:

<ajaxToolkit:AutoCompleteExtenderCompletionListElementID="divAutoComp" etc..>

Then you could "manually" style the div...

hi,

thanks for your reply. i am having a form->table->text box and outside that table i am having the AutoCompleteExtender. can you explain me where i should use the DIV and for target what control i have to give.

waiting for your reply!!!!

- Place the div whereever you want the suggestions to appear.

-<ajaxToolkit:AutoCompleteExtenderrunat="server"ID="ACE1"

MinimumPrefixLength="2"CompletionSetCount="1"CompletionInterval="1"

TargetControlID="userTB"EnableCaching="false"CompletionListElementID="divAutoComp"

ServiceMethod="GetMail">

**TargetControlIDis the textbox you want autocomplete to work on.

**CompletionListElementID is the div where you want the suggestions to appear.

(**CompletionSetCount is the number of suggestions you want to see)

NNM:

**CompletionListElementID is the div where you want the suggestions to appear.

I didn't need to specify a CompletionListElementID, however that is a good tip. I can all ready see a good use for that!. Thanks, NNM.

k2schreck:

NNM:

**CompletionListElementID is the div where you want the suggestions to appear.

I didn't need to specify a CompletionListElementID, however that is a good tip. I can all ready see a good use for that!. Thanks, NNM.

but for my code it doesnt make much difference. it still works the same way as it was working before giving the CompletionListElementID .

sbadriprasad:

but for my code it doesnt make much difference. it still works the same way as it was working before giving the CompletionListElementID .

Do you use multiple css files? If so exclude one at a time and test to see if it works. That will help narrow down a css culprit. I have not caputred the return html from the AutoComplete so I don't know if it uses a div, table, ul etc. but examine closely any generic tags in your css file. One of them may be causing the troubles.

Gook luck!

Ajax and free text box

On a previus post i was asking for a control for giving format to text in an aplication and someone posted me to use FREE TEXT BOX, and it was what I was looking for.

The problem is that it can't work with ajax, the text fox appears like no editable(can't write anything on it), but just if inside a update panel , so the problem is with ajax.

If someone have an answer to my problem please give it to me, or if you know any other control to use.

Thanks

I have not understood your question correctly, but would want you to know that your control has to be inside the UpdatePanel control if you want it to be rendered via AJAX. That is the simple way of doing a Page pre-render, unless you decide to take full control of the AJAX stuff yourself.

See this post: http://freetextbox.com/forums/permalink/6789/8468/ShowThread.aspx#8468

-Damien