Have something to say? Contribute New Article Reply to this Article
autocomplete textbox
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
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.
// ########## STORES THE XMLHTTP OBJECT
var xmlhttp = createxmlhttp();
// ########## CREATES AN XMLHTTP OBJECT
function createxmlhttp() {
var xmlhttp;
if(window.ActiveXObject) { // INTERNET EXPLORER
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
xmlhttp = false;
}
} else { // OTHER BROWSERS
try {
xmlhttp = new XMLHttpRequest();
} catch (f) {
xmlhttp = false;
}
}
if (!xmlhttp) { // RETURN THE OBJECT OR DISPLAY ERROR
alert('there was an error creating the xmlhttp object');
} else {
return xmlhttp;
}
}
// ########## MAKE AN ASYNCHRONOUS CALL USING THE XMLHTTP OBJECT
// ########## THE VARIABLE STR BEING THE TEXT ALREADY ENTERED
function searchforwords(str) {
try {
// PROCEED ONLY IF OBJECT IS NOT BUSY
if (xmlhttp.readyState === 4 || xmlhttp.readyState === 0) {
// EXECUTE THE PAGE ON THE SERVER AND PASS QUERYSTRING
xmlhttp.open("POST", "autocomplete.aspx?text=" + str, true);
// DEFINE METHOD TO HANDLE THE RESPONSE
xmlhttp.onreadystatechange = handleresponse;
// MAKE CALL
xmlhttp.send(null);
} else {
// IF CONNECTION IS BUSY, WAIT AND RETRY
setTimeout('searchforwords("' + str + '")', 1000);
}
} catch(e) {
alert('ERROR: ' + e);
}
}
// ########## EXECUTED WHEN MESSAGE IS RECIEVED
function handleresponse() {
try {
// MOVE FORWARD IF TRANSACTION COMPLETE
if (xmlhttp.readyState == 4) {
// STATUS OF 200 INDICATES COMPLETED CORRECTLY
if (xmlhttp.status == 200) {
// WILL HOLD THE XML DOCUMENT
var xmldoc;
if (window.ActiveXObject) { // INTERNET EXPLORER
xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.async = "false";
xmldoc.loadXML(xmlhttp.responseText);
} else { // OTHER BROWSERS
var parser = new DOMParser();
xmldoc = parser.parseFromString(xmlhttp.responseText, "text/xml");
}
// PARSE EACH RESULT
var res = xmldoc.getElementsByTagName('result');
for(var i = 0; i < res.length; i ++) {
alert(res[i].childNodes[0].nodeValue); // DO SOMETHING WITH THIS VALUE
}
} else { // STATUS OTHER THAN 200 IS AN ERROR
alert('there was an error recieving the message');
}
}
} catch(e) {
alert('there was an error contacting the server');
}
}
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
Imports System.Xml
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Dim xmldoc As XmlTextWriter
' SETUP THE PAGE
Response.Clear()
Response.ContentType = "text/xml"
' SETUP THE XML DECLARATION
xmldoc = New XmlTextWriter(Response.OutputStream, System.Text.Encoding.UTF8)
xmldoc.WriteStartDocument(True)
xmldoc.WriteStartElement("root")
findwords(xmldoc)
xmldoc.WriteEndElement()
xmldoc.WriteEndDocument()
xmldoc.Close()
Response.End()
End Sub
' ########## FINDS MATCHING WORDS IN DATABASE AND PRINTS THEM TO THE XML WRITER
Private Function findwords(ByVal xmldoc As XmlWriter) As String
' USE 'Request.Querystring("txt")' TO RETURN THE VARIABLE PASSED FROM THE HTML PAGE
' PERFORM DATABASE QUERY HERE AND RETURN VALUES
' THEN LOOP THROUGH THE VALUES AND PRINT THEM TO THE XML USING THE METHOD BELOW
xmldoc.WriteElementString("result", DATABASE VALUE)
End Function
3. Now all you have to do is add an ONKEYPRESS event to the textbox to fire the function.
<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
Fungus1487
Posting Pro in Training
459 posts since Apr 2007
Reputation Points: 66
Solved Threads: 56
Upto this I have done. But my problem is how to select a item from the list which will be displayed in the textbox.
Fungus1487
Posting Pro in Training
459 posts since Apr 2007
Reputation Points: 66
Solved Threads: 56
[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.
// ########## STORES THE XMLHTTP OBJECT
var xmlhttp = createxmlhttp();
// ########## CREATES AN XMLHTTP OBJECT
function createxmlhttp() {
var xmlhttp;
if(window.ActiveXObject) { // INTERNET EXPLORER
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
xmlhttp = false;
}
} else { // OTHER BROWSERS
try {
xmlhttp = new XMLHttpRequest();
} catch (f) {
xmlhttp = false;
}
}
if (!xmlhttp) { // RETURN THE OBJECT OR DISPLAY ERROR
alert('there was an error creating the xmlhttp object');
} else {
return xmlhttp;
}
}
// ########## MAKE AN ASYNCHRONOUS CALL USING THE XMLHTTP OBJECT
// ########## THE VARIABLE STR BEING THE TEXT ALREADY ENTERED
function searchforwords(str) {
try {
// PROCEED ONLY IF OBJECT IS NOT BUSY
if (xmlhttp.readyState === 4 || xmlhttp.readyState === 0) {
// EXECUTE THE PAGE ON THE SERVER AND PASS QUERYSTRING
xmlhttp.open("POST", "autocomplete.aspx?text=" + str, true);
// DEFINE METHOD TO HANDLE THE RESPONSE
xmlhttp.onreadystatechange = handleresponse;
// MAKE CALL
xmlhttp.send(null);
} else {
// IF CONNECTION IS BUSY, WAIT AND RETRY
setTimeout('searchforwords("' + str + '")', 1000);
}
} catch(e) {
alert('ERROR: ' + e);
}
}
// ########## EXECUTED WHEN MESSAGE IS RECIEVED
function handleresponse() {
try {
// MOVE FORWARD IF TRANSACTION COMPLETE
if (xmlhttp.readyState == 4) {
// STATUS OF 200 INDICATES COMPLETED CORRECTLY
if (xmlhttp.status == 200) {
// WILL HOLD THE XML DOCUMENT
var xmldoc;
if (window.ActiveXObject) { // INTERNET EXPLORER
xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.async = "false";
xmldoc.loadXML(xmlhttp.responseText);
} else { // OTHER BROWSERS
var parser = new DOMParser();
xmldoc = parser.parseFromString(xmlhttp.responseText, "text/xml");
}
// PARSE EACH RESULT
var res = xmldoc.getElementsByTagName('result');
for(var i = 0; i < res.length; i ++) {
alert(res[i].childNodes[0].nodeValue); // DO SOMETHING WITH THIS VALUE
}
} else { // STATUS OTHER THAN 200 IS AN ERROR
alert('there was an error recieving the message');
}
}
} catch(e) {
alert('there was an error contacting the server');
}
}
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
Imports System.Xml
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Dim xmldoc As XmlTextWriter
' SETUP THE PAGE
Response.Clear()
Response.ContentType = "text/xml"
' SETUP THE XML DECLARATION
xmldoc = New XmlTextWriter(Response.OutputStream, System.Text.Encoding.UTF8)
xmldoc.WriteStartDocument(True)
xmldoc.WriteStartElement("root")
findwords(xmldoc)
xmldoc.WriteEndElement()
xmldoc.WriteEndDocument()
xmldoc.Close()
Response.End()
End Sub
' ########## FINDS MATCHING WORDS IN DATABASE AND PRINTS THEM TO THE XML WRITER
Private Function findwords(ByVal xmldoc As XmlWriter) As String
' USE 'Request.Querystring("txt")' TO RETURN THE VARIABLE PASSED FROM THE HTML PAGE
' PERFORM DATABASE QUERY HERE AND RETURN VALUES
' THEN LOOP THROUGH THE VALUES AND PRINT THEM TO THE XML USING THE METHOD BELOW
xmldoc.WriteElementString("result", DATABASE VALUE)
End Function
3. Now all you have to do is add an ONKEYPRESS event to the textbox to fire the function.
<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]
This question has already been solved
You
© 2012 DaniWeb® LLC
