Been to many sample about "autocomplete" but most pages are in PHPs. I am using my usual classic ASP code here (coupled with Ajax) and even using a Cobol COM+ object wrapper to extract data from the server. It includes three (3) files as follows;
1. ajaxPage3.ASP (main page)
2. ajaxPage3a.JS (javascript/Ajax)
3. ajaxPage3a.ASP (a page that is reading data from the server)
ajaxPage3.asp file
Code:<%@language="vbscript" codepage="1252"%> <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <% Dim qry, iBrand iBrand = "" qry = trim(request.Querystring("qFunc")) if qry = "jxBrand" then iBrand = trim(request.Querystring("qBrand")) end if %> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Sample Autocomplete AJAX using Classic ASP</title> <meta http-equiv="content-type" content="text/html; charset=us-ascii" /> <meta name="author" content="Rene Aquino Surop" /> <script type="text/javascript" src="ajaxPage3a.js"></script> </head> <body> <form name="aspForm" action="ajaxPage3.asp" method="post" /> <div style="margin-top:15px; border:1px solid #3366ff; padding:10px;"> <label for="jBrand">Car Brand: </label><div id="brandDiv" style="position:absolute; z-index:100;" /></div> <input id="txtBrand" name="txtBrand" value="<%=trim(iBrand)%>" onKeyUp="srchBrand(this.value)" /> </div> </form> <div style="margin-top:15px; border:1px solid #3366ff; padding:10px;"> The sample Autocomplete provides suggestions while you type into the field. Here the suggestions are brand names, displayed when a character are entered into the field.<br /><br /> The datasource is a classic ASP server-side script which returns HTML data, specified via a simple URL for the source-option. </div> </body> </html>
ajaxPage3a.JS file
Code:/* car brand searching script */ var a; function srchBrand(varTxt){ if(varTxt.length>0){ var b="ajaxPage3a.asp?sid="+Math.random()+"&qAction=Search&qBrand="+varTxt; a=GetXmlHttpObject(recResult); document.getElementById("brandDiv").style.display=''; document.getElementById("brandDiv").innerHTML="<img src='/images/arrow.gif'/>"; a.open("GET",b,true);a.send(null);} else{ document.getElementById("brandDiv").style.display='none'; document.getElementById("brandDiv").innerHTML="";}} function recResult(){ if(a.readyState==4||a.readyState=="complete"){ document.getElementById("brandDiv").innerHTML=a.responseText;}} /* asynchronous javascript object */ function GetXmlHttpObject(handler){ var d=null; if(navigator.userAgent.indexOf("MSIE")>=0){ var e="Msxml2.XMLHTTP"; if(navigator.appVersion.indexOf("MSIE 5.5")>=0){ e="Microsoft.XMLHTTP";} try{ d=new ActiveXObject(e); d.onreadystatechange=handler; return d;} catch(e){ alert("Browser Error. Unable to perform AJAX feature"); return;}} if(navigator.userAgent.indexOf("Mozilla")>=0 || navigator.userAgent.indexOf("Opera")>=0){ d=new XMLHttpRequest(); d.onload=handler; d.onerror=handler; return d;}}
ajaxPage3a.ASP file
You can also use jQuery technology here to use "autocomplete" function, it is an alternative. That is about it, but feel free to enhance it a little bit further using jQuery (must be using same entry field autocomplete function). Enjoy!Code:<% Dim action, iBrand, iResult action = trim(request.QueryString("qAction")) if action = "Search" then iBrand = trim(request.QueryString("qBrand")) 'this part is actually a server-side Cobol COM wrapper or object that is fetching data as below; 'DUMMY RESULT ONLY iResult = "<div style='border:1px #ccc solid; margin-top:23px; margin-left:5px; width:200px;'><table width='100%' cellpadding='0px' cellspacing='0px' align='center'>" iResult = iResult + "<tr bgcolor='#cccc99'><td style='width:100px'><a href='ajaxPage3.asp?qFunc=jxBrand&qBrand=Chevrolet'>Chevrolet</a></td></tr>" iResult = iResult + "<tr bgcolor='#ffffff'><td style='width:100px'><a href='ajaxPage3.asp?qFunc=jxBrand&qBrand=Ford'>Ford</a></td></tr>" iResult = iResult + "<tr bgcolor='#cccc99'><td style='width:100px'><a href='ajaxPage3.asp?qFunc=jxBrand&qBrand=Honda'>Honda</a></td></tr>" iResult = iResult + "<tr bgcolor='#ffffff'><td style='width:100px'><a href='ajaxPage3.asp?qFunc=jxBrand&qBrand=Hyundai'>Hyundai</a></td></tr>" iResult = iResult + "<tr bgcolor='#cccc99'><td style='width:100px'><a href='ajaxPage3.asp?qFunc=jxBrand&qBrand=Toyota'>Toyota</a></td></tr>" iResult = iResult + "</table></div>" response.write(iResult) end if %>
![]()
![]()
![]()


Reply With Quote
Bookmarks