autocomplete textbox

Please support our ASP.NET advertiser: Intel Parallel Studio Home
Thread Solved

•
•
Join Date: Nov 2006
Posts: 4
Reputation: nil is an unknown quantity at this point 
Solved Threads: 0
nil nil is offline Offline
Newbie Poster

autocomplete textbox

 
0
  #1
Feb 27th, 2007
Hello all,

I want autocomplete textbox facility like google in my application and i searched on the net and i found some articles that shows i've to use ajax(combination of javascript and xml) but they are using .dll file component but i don't want to use any kind of .dll file and want to use simple code and javascript...so anyone know about it then please do forward me link or provide me some code snippet.

and i've one javascript but it uses static array and i want to fetch data from the database like name of the books and want to show as possible choices so user can search easily and i am new to .net so i don't know how to do that ?

I am using vb.net2003 and framework is 1.1.

The help will be greatly appreciated..

Thanks & Regards,
Nil
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2008
Posts: 9
Reputation: daniweb@14 is an unknown quantity at this point 
Solved Threads: 1
daniweb@14 daniweb@14 is offline Offline
Newbie Poster

Re: autocomplete textbox

 
0
  #2
Jan 1st, 2008
I have also same requirment. Can anybody help me
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2007
Posts: 439
Reputation: Fungus1487 is on a distinguished road 
Solved Threads: 50
Fungus1487's Avatar
Fungus1487 Fungus1487 is offline Offline
Posting Pro in Training

Re: autocomplete textbox

 
0
  #3
Jan 3rd, 2008
i dont know why you would need a dll but anyway.

you will need to do 3 things

1. basic page with your textbox in. Then use the following javascript to pass a query to the server along with your variable of what has been entered so far in the textbox. This is done using the GET method or passing a variable in the url.
ASP.NET Syntax (Toggle Plain Text) 
  1. // ########## STORES THE XMLHTTP OBJECT
  2. var xmlhttp = createxmlhttp();
  3.  
  4. // ########## CREATES AN XMLHTTP OBJECT
  5. function createxmlhttp() {
  6. 	var xmlhttp;
  7.  
  8.   	if(window.ActiveXObject) { // INTERNET EXPLORER
  9.     	try {
  10.       		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  11.     	} catch (e) {
  12.       		xmlhttp = false;
  13.     	}
  14.   	} else { // OTHER BROWSERS
  15.     	try {
  16.       		xmlhttp = new XMLHttpRequest();
  17.    		} catch (f) {
  18.       		xmlhttp = false;
  19.     	}
  20.   	}
  21.  
  22.   	if (!xmlhttp) { // RETURN THE OBJECT OR DISPLAY ERROR
  23. 		alert('there was an error creating the xmlhttp object');
  24.   	} else {
  25.     	return xmlhttp;
  26. 	}
  27. }
  28.  
  29. // ########## MAKE AN ASYNCHRONOUS CALL USING THE XMLHTTP OBJECT
  30. // ########## THE VARIABLE STR BEING THE TEXT ALREADY ENTERED
  31. function searchforwords(str) {
  32. 	try {
  33.   		// PROCEED ONLY IF OBJECT IS NOT BUSY
  34. 		if (xmlhttp.readyState === 4 || xmlhttp.readyState === 0) {
  35.     		// EXECUTE THE PAGE ON THE SERVER AND PASS QUERYSTRING
  36.     		xmlhttp.open("POST", "autocomplete.aspx?text=" + str, true);
  37.     		// DEFINE METHOD TO HANDLE THE RESPONSE
  38.     		xmlhttp.onreadystatechange = handleresponse;
  39.     		// MAKE CALL
  40.     		xmlhttp.send(null);
  41.  
  42.   		} else {
  43.     		// IF CONNECTION IS BUSY, WAIT AND RETRY
  44.     		setTimeout('searchforwords("' + str + '")', 1000);
  45.   		}
  46.   	} catch(e) {
  47.   		alert('ERROR: ' + e);
  48.   	}
  49. }
  50.  
  51. // ########## EXECUTED WHEN MESSAGE IS RECIEVED
  52. function handleresponse() {
  53. 	try {
  54.  
  55.   		// MOVE FORWARD IF TRANSACTION COMPLETE
  56.   		if (xmlhttp.readyState == 4) {
  57.  
  58.     		// STATUS OF 200 INDICATES COMPLETED CORRECTLY
  59. 			if (xmlhttp.status == 200) {
  60.  
  61. 				// WILL HOLD THE XML DOCUMENT
  62. 				var xmldoc;
  63. 				if (window.ActiveXObject) { // INTERNET EXPLORER
  64.   					xmldoc = new ActiveXObject("Microsoft.XMLDOM");
  65.   					xmldoc.async = "false";
  66.   					xmldoc.loadXML(xmlhttp.responseText);
  67.   				} else { // OTHER BROWSERS
  68.   					var parser = new DOMParser();
  69.   					xmldoc = parser.parseFromString(xmlhttp.responseText, "text/xml");
  70.   				}
  71.  
  72. 				// PARSE EACH RESULT
  73. 				var res = xmldoc.getElementsByTagName('result');
  74. 				for(var i = 0; i < res.length; i ++) {
  75. 				    alert(res[i].childNodes[0].nodeValue); // DO SOMETHING WITH THIS VALUE
  76. 				}
  77.  
  78.     		} else { // STATUS OTHER THAN 200 IS AN ERROR
  79. 				alert('there was an error recieving the message');
  80.     		}
  81.   		}
  82.   	} catch(e) {
  83.   		alert('there was an error contacting the server');
  84.   	}
  85. }

2. create a page in the same directory called autocomplete.aspx or matching wherever you passed your querystring to above. Then output xml from this page by adding this code or similiar to your codebehind aspx.vb page

ASP.NET Syntax (Toggle Plain Text) 
  1. Imports System.Xml
  2.  
  3. Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
  4.         Dim xmldoc As XmlTextWriter
  5.  
  6.         ' SETUP THE PAGE
  7.         Response.Clear()
  8.         Response.ContentType = "text/xml"
  9.  
  10.         ' SETUP THE XML DECLARATION
  11.         xmldoc = New XmlTextWriter(Response.OutputStream, System.Text.Encoding.UTF8)
  12.         xmldoc.WriteStartDocument(True)
  13.         xmldoc.WriteStartElement("root")
  14.  
  15.         findwords(xmldoc)
  16.         xmldoc.WriteEndElement()
  17.         xmldoc.WriteEndDocument()
  18.         xmldoc.Close()
  19.         Response.End()
  20.     End Sub
  21.  
  22.     ' ########## FINDS MATCHING WORDS IN DATABASE AND PRINTS THEM TO THE XML WRITER
  23.     Private Function findwords(ByVal xmldoc As XmlWriter) As String
  24.         ' USE 'Request.Querystring("txt")' TO RETURN THE VARIABLE PASSED FROM THE HTML PAGE
  25.         ' PERFORM DATABASE QUERY HERE AND RETURN VALUES
  26.         ' THEN LOOP THROUGH THE VALUES AND PRINT THEM TO THE XML USING THE METHOD BELOW
  27.                 xmldoc.WriteElementString("result", DATABASE VALUE)
  28.     End Function

3. Now all you have to do is add an ONKEYPRESS event to the textbox to fire the function.
ASP.NET Syntax (Toggle Plain Text) 
  1. <INPUT type="text" name="searchtext" onkeypress="searchforwords(this.value)" />


Note: this was ripped from a project of mine and not intended for autocomplete functionality but has been adapted to do this (there may be small syntax errors etc)

Further Note: What you do with the returned values is down to you

any questions are welcome
When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2008
Posts: 9
Reputation: daniweb@14 is an unknown quantity at this point 
Solved Threads: 1
daniweb@14 daniweb@14 is offline Offline
Newbie Poster

Re: autocomplete textbox

 
0
  #4
Jan 5th, 2008
Upto this I have done. But my problem is how to select a item from the list which will be displayed in the textbox.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2007
Posts: 439
Reputation: Fungus1487 is on a distinguished road 
Solved Threads: 50
Fungus1487's Avatar
Fungus1487 Fungus1487 is offline Offline
Posting Pro in Training

Re: autocomplete textbox

 
0
  #5
Jan 5th, 2008
how are you displaying these items ?
When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2009
Posts: 2
Reputation: kanuja01 is an unknown quantity at this point 
Solved Threads: 1
kanuja01 kanuja01 is offline Offline
Newbie Poster

Re: autocomplete textbox

 
0
  #6
Feb 13th, 2009
[Hi,

Please let me know ,how to autocomplete textboxwith this return value.

QUOTE=Fungus1487;503152]i dont know why you would need a dll but anyway.

you will need to do 3 things

1. basic page with your textbox in. Then use the following javascript to pass a query to the server along with your variable of what has been entered so far in the textbox. This is done using the GET method or passing a variable in the url.
ASP.NET Syntax (Toggle Plain Text) 
  1. // ########## STORES THE XMLHTTP OBJECT
  2. var xmlhttp = createxmlhttp();
  3.  
  4. // ########## CREATES AN XMLHTTP OBJECT
  5. function createxmlhttp() {
  6. 	var xmlhttp;
  7.  
  8.   	if(window.ActiveXObject) { // INTERNET EXPLORER
  9.     	try {
  10.       		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  11.     	} catch (e) {
  12.       		xmlhttp = false;
  13.     	}
  14.   	} else { // OTHER BROWSERS
  15.     	try {
  16.       		xmlhttp = new XMLHttpRequest();
  17.    		} catch (f) {
  18.       		xmlhttp = false;
  19.     	}
  20.   	}
  21.  
  22.   	if (!xmlhttp) { // RETURN THE OBJECT OR DISPLAY ERROR
  23. 		alert('there was an error creating the xmlhttp object');
  24.   	} else {
  25.     	return xmlhttp;
  26. 	}
  27. }
  28.  
  29. // ########## MAKE AN ASYNCHRONOUS CALL USING THE XMLHTTP OBJECT
  30. // ########## THE VARIABLE STR BEING THE TEXT ALREADY ENTERED
  31. function searchforwords(str) {
  32. 	try {
  33.   		// PROCEED ONLY IF OBJECT IS NOT BUSY
  34. 		if (xmlhttp.readyState === 4 || xmlhttp.readyState === 0) {
  35.     		// EXECUTE THE PAGE ON THE SERVER AND PASS QUERYSTRING
  36.     		xmlhttp.open("POST", "autocomplete.aspx?text=" + str, true);
  37.     		// DEFINE METHOD TO HANDLE THE RESPONSE
  38.     		xmlhttp.onreadystatechange = handleresponse;
  39.     		// MAKE CALL
  40.     		xmlhttp.send(null);
  41.  
  42.   		} else {
  43.     		// IF CONNECTION IS BUSY, WAIT AND RETRY
  44.     		setTimeout('searchforwords("' + str + '")', 1000);
  45.   		}
  46.   	} catch(e) {
  47.   		alert('ERROR: ' + e);
  48.   	}
  49. }
  50.  
  51. // ########## EXECUTED WHEN MESSAGE IS RECIEVED
  52. function handleresponse() {
  53. 	try {
  54.  
  55.   		// MOVE FORWARD IF TRANSACTION COMPLETE
  56.   		if (xmlhttp.readyState == 4) {
  57.  
  58.     		// STATUS OF 200 INDICATES COMPLETED CORRECTLY
  59. 			if (xmlhttp.status == 200) {
  60.  
  61. 				// WILL HOLD THE XML DOCUMENT
  62. 				var xmldoc;
  63. 				if (window.ActiveXObject) { // INTERNET EXPLORER
  64.   					xmldoc = new ActiveXObject("Microsoft.XMLDOM");
  65.   					xmldoc.async = "false";
  66.   					xmldoc.loadXML(xmlhttp.responseText);
  67.   				} else { // OTHER BROWSERS
  68.   					var parser = new DOMParser();
  69.   					xmldoc = parser.parseFromString(xmlhttp.responseText, "text/xml");
  70.   				}
  71.  
  72. 				// PARSE EACH RESULT
  73. 				var res = xmldoc.getElementsByTagName('result');
  74. 				for(var i = 0; i < res.length; i ++) {
  75. 				    alert(res[i].childNodes[0].nodeValue); // DO SOMETHING WITH THIS VALUE
  76. 				}
  77.  
  78.     		} else { // STATUS OTHER THAN 200 IS AN ERROR
  79. 				alert('there was an error recieving the message');
  80.     		}
  81.   		}
  82.   	} catch(e) {
  83.   		alert('there was an error contacting the server');
  84.   	}
  85. }

2. create a page in the same directory called autocomplete.aspx or matching wherever you passed your querystring to above. Then output xml from this page by adding this code or similiar to your codebehind aspx.vb page

ASP.NET Syntax (Toggle Plain Text) 
  1. Imports System.Xml
  2.  
  3. Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
  4.         Dim xmldoc As XmlTextWriter
  5.  
  6.         ' SETUP THE PAGE
  7.         Response.Clear()
  8.         Response.ContentType = "text/xml"
  9.  
  10.         ' SETUP THE XML DECLARATION
  11.         xmldoc = New XmlTextWriter(Response.OutputStream, System.Text.Encoding.UTF8)
  12.         xmldoc.WriteStartDocument(True)
  13.         xmldoc.WriteStartElement("root")
  14.  
  15.         findwords(xmldoc)
  16.         xmldoc.WriteEndElement()
  17.         xmldoc.WriteEndDocument()
  18.         xmldoc.Close()
  19.         Response.End()
  20.     End Sub
  21.  
  22.     ' ########## FINDS MATCHING WORDS IN DATABASE AND PRINTS THEM TO THE XML WRITER
  23.     Private Function findwords(ByVal xmldoc As XmlWriter) As String
  24.         ' USE 'Request.Querystring("txt")' TO RETURN THE VARIABLE PASSED FROM THE HTML PAGE
  25.         ' PERFORM DATABASE QUERY HERE AND RETURN VALUES
  26.         ' THEN LOOP THROUGH THE VALUES AND PRINT THEM TO THE XML USING THE METHOD BELOW
  27.                 xmldoc.WriteElementString("result", DATABASE VALUE)
  28.     End Function

3. Now all you have to do is add an ONKEYPRESS event to the textbox to fire the function.
ASP.NET Syntax (Toggle Plain Text) 
  1. <INPUT type="text" name="searchtext" onkeypress="searchforwords(this.value)" />


Note: this was ripped from a project of mine and not intended for autocomplete functionality but has been adapted to do this (there may be small syntax errors etc)

Further Note: What you do with the returned values is down to you

any questions are welcome[/QUOTE]
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2009
Posts: 2
Reputation: kanuja01 is an unknown quantity at this point 
Solved Threads: 1
kanuja01 kanuja01 is offline Offline
Newbie Poster

Re: autocomplete textbox

 
0
  #7
Feb 13th, 2009
what do you with return value? How to use this value for autocomplete textbox?
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the ASP.NET Forum
Thread Tools Search this Thread



Tag cloud for ASP.NET
.net 2.0 activexcontrol advice ajax alltypeofvideos anathor asp asp.net bc30451 bottomasp.net browser button c# c#gridviewcolumn checkbox click commonfunctions compatible confirmationcodegeneration content courier css dataaccesslayer database datagridview datagridviewcheckbox datalist deadlock development dgv dropdown dropdownlist edit expose feedback flash form formatdecimal forms formview google grid gridview homeedition hosting iframe iis index javascript jquery list listbox login microsoft migration mono mouse mssql multistepregistration news numerical object objects panelmasterpagebuttoncontrols problem project radio ratings richtextbox rotatepage save schoolproject search security session silverlight smartcard sql-server sqlserver2005 suse textbox tracking typeof unauthorized update validation vb.net video videos view virtualdirectory vista visual-studio visualstudio web webdevelopemnt webservice xml youareanotmemberofthedebuggerusers
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC