Simple Ajax search form that creates a formatted report as you type keywords

Posted on by

This search form is based on the PHP and AJAX Live Search example from the w3schools.com site. I adapted it to show how it might work with ASP classic.

Picture 4.jpg

This form finds all courses in a database that contain whatever has been typed so far in their title, then displays them instantly as the keywords are being typed, grouped by type in two tables. Here you can see that “FIR” has been typed, and mostly courses on fire safety are found.

Picture 5.jpg

The letters are sent as soon as they are typed, using the onkeyup event as the trigger. Below the letters INF have been typed and courses containing “Infection”, “Inform”, “Infant” have been found. The changes to the result lists are very responsive and snappy as you type.

Picture 6.jpg

To build this form you will need 4 files:

  1. mydatabase.asp: a database connection file
  2. report.htm: the page containing the form and the display of the results
  3. livesearch.js the javascript functions the open and send the XMLHttpRequest
  4. functions.asp the file that queries the database and returns the formatted results.

This is the source of mydatabase.asp:

<%

  ' FileName="Connection_odbc_conn_dsn.htm"

  ' Type="ADO" 

  ' DesigntimeType="ADO"

  ' HTTP="true"

  ' Catalog=""

  ' Schema=""

  Dim MM_mydsn_STRING

  'MM_lmsp_STRING = "dsn=MYDSN;uid=userid;pwd=mypassword;"

  %>

Replace the items in bold with the appropriate values for your database.

This is the source of report.htm:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <title>Live Search using ASP</title>
  <script src="livesearch.js" language="javascript"></script>
  </head>


<body>
  <p>&nbsp;</p>
  <p>This page will find all active online activities in the system. </p>


<p>Enter a keyword or phrase in the title of the course:</p>
  <form> 
  Keyword&nbsp;<input name="keyword" type="text" id="keyword" value=""  onkeyup="showResult(this.value)" />
  </form> 
  <div id="update"></div>


</body>
  </html>

This is the source of “livesearch.js”. 

var xmlHttp;
function showResult(str)
{

if (str.length==0)
 { 
 document.getElementById("update").
 innerHTML="";
 document.getElementById("update").
 style.border="0px";
 return;
 }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request");
 return;
 } 
var url="functions.asp";
url=url+"?keyword="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged ;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);

} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 

 document.getElementById("update").
 innerHTML=xmlHttp.responseText;
 document.getElementById("update").style.border="1px solid #A5ACB2"
;
 } 
}
function GetXmlHttpObject()
{

var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }

catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

As you can see it is almost identical to the w3schools example, except I changed a few div and function names. In other words you can use the same code for PHP or ASP or whatever.

When onkeyup event fires, the showResult function is passed the value of whatever has been typed so far. It sends a GET request to functions.asp with the typed letters in the query string (“keyword=[typed letters]”).

This is the source of functions.asp


<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
  <!--#include file="mydatabase.asp" -->
  
  <%
  Dim Recordset1__keyword
  If (Request.querystring("keyword") <> "") Then 
  Recordset1__keyword = Request.querystring("keyword")
  else Recordset1__keyword = "" 
  End If

Dim Recordset2__keyword
  If (Request.querystring("keyword") <> "") Then 
  Recordset2__keyword = Request.querystring("keyword")
  else Recordset2__keyword = ""
  End If



Dim Recordset1
  Dim Recordset1_cmd
  Dim Recordset1_numRows


Set Recordset1_cmd = Server.CreateObject ("ADODB.Command")
  Recordset1_cmd.ActiveConnection = MM_mydsn_STRING
  Recordset1_cmd.CommandText = "select * from learningactivities where (LEARNINGACTIVITYTYPEID = 300) and STATE = 'A' AND lower(TITLE) like lower('%" &  Recordset1__keyword & "%') order by code"
  Recordset1_cmd.Prepared = true
  Recordset1_cmd.Parameters.Append Recordset1_cmd.CreateParameter("param1", 200, 1, 255, Recordset1__keyword) ' adVarChar


Set Recordset1 = Recordset1_cmd.Execute


Dim Recordset2
  Dim Recordset2_cmd
  Dim Recordset2_numRows


Set Recordset2_cmd = Server.CreateObject ("ADODB.Command")
  Recordset2_cmd.ActiveConnection = MM_mydsn_STRING
  Recordset2_cmd.CommandText = "select * from learningactivities where (LEARNINGACTIVITYTYPEID = 400) and STATE = 'A' AND lower(TITLE) like lower('%" &  Recordset2__keyword & "%') order by code"
  Recordset2_cmd.Prepared = true
  Recordset2_cmd.Parameters.Append Recordset1_cmd.CreateParameter("param1", 200, 1, 255, Recordset2__keyword) 
  Set Recordset2 = Recordset2_cmd.Execute
  
  response.write("<!--Other web based courses table--><table cellpadding=0 cellspacing=""0"" id=""results"" border=""1"" align=""left"" style=""width:49%;""><tr><td colspan=""2"">active Other Web based courses</td></tr><tr><td><b>Code</b></td><td><b>Title</b></td></tr>")
  
  'if request.querystring("mode")="s" then
  while not recordset1.eof
  response.write ("<tr><td>" & recordset1("code") & "</td>")
  response.write ("<td><a href='"& recordset1("outlinelink") & "' target='_blank'>" & recordset1("title") & "</a></td></tr>")
  recordset1.movenext
  wend


response.write("</table><!--scorm table--><table cellpadding=0 cellspacing=""0"" id=""results2"" border=""1"" align=""left"" style=""margin-left:12px;"" width=""49%""><tr><td colspan=""2"">active SCORM courses</td></tr><tr><td><b>Code</b></td><td><b>Title</b></td></tr>")
    
  'if request.querystring("mode")="s" then
  while not recordset2.eof
  response.write ("<tr><td>" & recordset2("code") & "</td>")
  response.write ("<td><a href='"& recordset2("outlinelink") & "' target='_blank'>" & recordset2("title") & "</a></td></tr>")
  recordset2.movenext
  wend



response.write("</table>")
    
    
  Recordset1.Close()
  Set Recordset1 = Nothing
  Recordset2.Close()
  Set Recordset2 = Nothing
    
  %>

functions.asp queries the database using the typed letters to filter the results. It then writes the results to the page, formatted into side-by-side tables.

More information:

  • PHP and AJAX Live Search
    AJAX Source Code to Suggest Example