autocomplete textbox

[nil]

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

[daniweb@14]

I have also same requirment. Can anybody help me

[Fungus1487]

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

[daniweb@14]

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]

how are you displaying these items ?

[kanuja01]

Hi,

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

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

[kanuja01]

what do you with return value? How to use this value for autocomplete textbox?