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

February 23, 2009

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.

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.

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.

To build this form you will need 4 files:

mydatabase.asp: a database connection file
report.htm: the page containing the form and the display of the results
livesearch.js the javascript functions the open and send the XMLHttpRequest
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

Ads by Google

Posted by ellen at February 23, 2009 12:00 PM