title: Dynamic search in HTA
body: <p>Fairly new to the world of VBScript, but have been working with HTML before.</p>
  
  <p>I have found a fully working database script (.hta) with a Microsoft Access database (data.mdb) attatched to it. The scripts lists the DVD's found in the database.</p>
  
  <p>I wish to have the script search the database dynamically, so when I write something in the search filed, the corresponding database results are shown immediately. This way I do not have to push the search button to list the results. I know how to do this in HTML with jQuery, but not in HTA with VBScripts or similar. </p>
  
  <p>The following HTA script is something I have downloaded and will be edited so I only have a search field and below the results will be listed. </p>
  
  <p>I hope someone out there is able to help me out, since I'm stuck on second day after searching without success.  </p>
  
  <p>Here is how the HTA script looks like:</p>
  
  <pre><code>&lt;html&gt;
  &lt;HTA:APPLICATION ID="oHTA"
       APPLICATIONNAME="myApp"
       BORDER="thick"
       BORDERSTYLE="normal"
       CAPTION="yes"
       ICON=./images/Icon.ico
       MAXIMIZEBUTTON="yes"
       MINIMIZEBUTTON="yes"
       SHOWINTASKBAR="yes"
       SINGLEINSTANCE="no"
       SYSMENU="yes"
       RESIZE="yes"
       VERSION=7.2
       WINDOWSTATE="normal"
       contextMenu=no
    &gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt; // Width and height in pixel to the window
      window.resizeTo(683,725);
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
  var collapseprevious="Yes" //Collapse previously open content when opening present? (yes/no)
  
  if (document.getElementById){
  document.write('&lt;style type="text/css"&gt;')
  document.write('.switchcontent{display:none;}')
  document.write('&lt;/style&gt;')
  }
  
  function getElementbyClass(classname){
  ccollect=new Array()
  var inc=0
  var alltags=document.all? document.all : document.getElementsByTagName("*")
  for (i=0; i&lt;alltags.length; i++){
  if (alltags[i].className==classname)
  ccollect[inc++]=alltags[i]
  }
  }
  
  function contractcontent(omit){
  var inc=0
  while (ccollect[inc]){
  if (ccollect[inc].id!=omit)
  ccollect[inc].style.display="none"
  inc++
  }
  }
  
  function expandcontent(cid){
  if (typeof ccollect!="undefined"){
  if (collapseprevious=="yes")
  contractcontent(cid)
  document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
  }
  }
  
  function revivecontent(){
  contractcontent("omitnothing")
  selectedItem=getselectedItem()
  selectedComponents=selectedItem.split("|")
  for (i=0; i&lt;selectedComponents.length-1; i++)
  document.getElementById(selectedComponents[i]).style.display="block"
  }
  
  function get_cookie(Name) { 
  var search = Name + "="
  var returnvalue = "";
  if (document.cookie.length &gt; 0) {
  offset = document.cookie.indexOf(search)
  if (offset != -1) { 
  offset += search.length
  end = document.cookie.indexOf(";", offset);
  if (end == -1) end = document.cookie.length;
  returnvalue=unescape(document.cookie.substring(offset, end))
  }
  }
  return returnvalue;
  }
  
  function getselectedItem(){
  if (get_cookie(window.location.pathname) != ""){
  selectedItem=get_cookie(window.location.pathname)
  return selectedItem
  }
  else
  return ""
  }
  
  function saveswitchstate(){
  var inc=0, selectedItem=""
  while (ccollect[inc]){
  if (ccollect[inc].style.display=="block")
  selectedItem+=ccollect[inc].id+"|"
  inc++
  }
  
  document.cookie=window.location.pathname+"="+selectedItem
  }
  
  function do_onload(){
  uniqueidn=window.location.pathname+"firsttimeload"
  getElementbyClass("switchcontent")
  if (enablepersist=="on" &amp;&amp; typeof ccollect!="undefined"){
  document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0" 
  firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
  if (!firsttimeload)
  revivecontent()
  }
  }
  
  
  if (window.addEventListener)
  window.addEventListener("load", do_onload, false)
  else if (window.attachEvent)
  window.attachEvent("onload", do_onload)
  else if (document.getElementById)
  window.onload=do_onload
  
  if (enablepersist=="on" &amp;&amp; document.getElementById)
  window.onunload=saveswitchstate
  
  &lt;/script&gt;
  
  
  &lt;title&gt;Search&lt;/title&gt;
  
  &lt;script language="vbscript"&gt;
  
  Dim conn 'GLOBAL doing this here so that all functions can use it
  
  sub dotheconnection
  
      Set conn = CreateObject("ADODB.Connection")
  
      conn.Open "Provider=Microsoft.Jet.OLEDB.4.0; Data Source =./Database/data.mdb; User Id=; Password="
  
      If conn.errors.count &lt;&gt; 0 Then 
  
  
      else
          ' if connected OK call sub getdata
          getdata
  
      end if
  end sub
  
  sub getdata
  
      SQL_query = "SELECT * FROM dvd ORDER BY Title"
      Set rsData = conn.Execute(SQL_query)
  
      strHTML = strHTML &amp; "&lt;table cellspacing='0' cellpadding='4' border='1'&gt;&lt;tr&gt;&lt;td bgcolor='#000000'&gt;&amp;nbsp;&lt;/td&gt;&lt;td bgcolor='#000000'&gt;&lt;font color='#FFFFFF'&gt;&lt;b&gt;Title&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;&lt;td bgcolor='#000000'&gt;&lt;font color='#FFFFFF'&gt;&lt;b&gt;Length&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;&lt;td bgcolor='#000000'&gt;&lt;font color='#FFFFFF'&gt;&lt;b&gt;Category&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;&lt;td bgcolor='#000000'&gt;&lt;font color='#FFFFFF'&gt;&lt;b&gt;Notes&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;&lt;td bgcolor='#000000'&gt;&lt;font color='#FFFFFF'&gt;&lt;b&gt;&amp;nbsp;&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;&lt;/tr&gt;"
      Do Until rsData.EOF = True
      strHTML = strHTML &amp; "&lt;tr&gt;&lt;td onclick='deleteUser("&amp; rsData("ID") &amp;")' language='vbscript' style='cursor:hand; color:red'&gt;Del&lt;/td&gt;&lt;td&gt;" &amp; rsData("Title") &amp; "&lt;/td&gt;&lt;td&gt;" &amp; rsData("Length") &amp; " &lt;/td&gt; &lt;td&gt;" &amp; rsData("Cat") &amp; " &lt;/td&gt; &lt;td&gt;" &amp; rsData("Notes") &amp; " &lt;/td&gt;&lt;td onclick='editUser("&amp; rsData("ID") &amp;")'language='vbscript' style='cursor:hand; color:red'&gt;Edit&lt;/td&gt;&lt;/tr&gt;"
      rsData.moveNext ' go to next record
      Loop
  
      strHTML = strHTML &amp; "&lt;/table&gt;"
      thediv.innerHTML = strHTML
  
  
      SQL_query = "SELECT Count(*) AS intTotal FROM dvd"
      Set rsData = conn.Execute(SQL_query)
      strHTML1 = strHTML1 &amp; "&lt;b&gt;Number of DVD's in My Database: &lt;/b&gt;"
      strHTML1 = strHTML1 &amp; "" &amp; rsData("intTotal") &amp; ""
      Count.innerHTML = strHTML1
  end sub
  
  
  sub searchdata
  
      SQL_query = "SELECT * FROM dvd WHERE Title LIKE '%"&amp; txtsrch.value &amp;"%' OR Notes LIKE '%"&amp; txtsrch.value &amp;"%' ORDER BY Title"
      Set rsData = conn.Execute(SQL_query)
      strHTML2 = strHTML2 &amp; "&lt;table cellspacing='0' cellpadding='4' border='1'&gt;&lt;tr&gt;&lt;td bgcolor='#000000'&gt;&amp;nbsp;&lt;/td&gt;&lt;td bgcolor='#000000'&gt;&lt;font color='#FFFFFF'&gt;&lt;b&gt;Title&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;&lt;td bgcolor='#000000'&gt;&lt;font color='#FFFFFF'&gt;&lt;b&gt;Length&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;&lt;td bgcolor='#000000'&gt;&lt;font color='#FFFFFF'&gt;&lt;b&gt;Category&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;&lt;td bgcolor='#000000'&gt;&lt;font color='#FFFFFF'&gt;&lt;b&gt;Notes&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;&lt;td bgcolor='#000000'&gt;&lt;font color='#FFFFFF'&gt;&lt;b&gt;&amp;nbsp;&lt;/b&gt;&lt;/font&gt;&lt;/td&gt;&lt;/tr&gt;"
      Do Until rsData.EOF = True
      strHTML2 = strHTML2 &amp; "&lt;tr&gt;&lt;td onclick='deleteUser("&amp; rsData("ID") &amp;")' language='vbscript' style='cursor:hand; color:red'&gt;Del&lt;/td&gt;&lt;td&gt;" &amp; rsData("Title") &amp; "&lt;/td&gt;&lt;td&gt;" &amp; rsData("Length") &amp; " &lt;/td&gt; &lt;td&gt;" &amp; rsData("Cat") &amp; " &lt;/td&gt; &lt;td&gt;" &amp; rsData("Notes") &amp; " &lt;/td&gt;&lt;td onclick='editUser("&amp; rsData("ID") &amp;")' language='vbscript' style='cursor:hand; color:red'&gt;Edit&lt;/td&gt;&lt;/tr&gt;"
      rsData.moveNext ' go to next record
      Loop
      strHTML2 = strHTML2 &amp; "&lt;/table&gt;"
      searchIT.innerHTML = strHTML2
  
  end sub
  
  sub deleteUser(id)
      If MsgBox("Are you sure you wish to remove this record?", vbYesNo) =vbYes Then       
      SQL_query = "DELETE * FROM dvd WHERE ID = " &amp; id
      conn.Execute(SQL_query)
      getdata
  Else
      MsgBox("Cancelled")
  End IF
  end sub
  
  sub addUser
  
      SQL_query = "INSERT INTO dvd (Title,Length,Notes,Cat) VALUES ('"&amp; txtTitle.value &amp;"','"&amp; txtLength.value &amp;"','"&amp; txtNotes.value &amp;"','"&amp; txtCat.value &amp;"')"
      conn.Execute(SQL_query)
      getdata
  
  end sub
  
  sub editUser(id)
  
      SQL_query = "SELECT * FROM dvd WHERE ID=" &amp; id
      Set rsData=conn.Execute(SQL_query)
      txtTitle.value = rsData("Title")
      txtLength.value =   rsData("Length")
      txtNotes.value =    rsData("Notes")
      txtCat.value =  rsData("Cat")
      txtID.value = rsData("ID")
      btnUpdate.disabled = false
      getdata
  
  end sub
  
  
  sub updateUser
  
      SQL_query = "UPDATE dvd SET Title='"&amp; txtTitle.value &amp;"', Length='"&amp; txtLength.value &amp;"' , Notes='"&amp; txtNotes.value &amp;"', Cat='"&amp; txtCat.value &amp;"' WHERE ID= " &amp; txtID.value 
      conn.Execute(SQL_query)
      getdata
  
  end sub
  
  
  &lt;/script&gt;
  &lt;style&gt;
  &lt;!--
  fieldset     { border: 1 solid #000080 }
  font         { font-family: Verdana; font-size: 10pt }
  --&gt;
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body onload="dotheconnection" language="vbscript"&gt;
  &lt;font face="Verdana" size="2"&gt;
  
  
  &lt;input type="button" value="Add / Edit - to Database" onClick="expandcontent('sc1')" style="font-size: 10px; font-family: Arial; background-color: #000080; color: #FFECFF"&gt;&lt;/font&gt;
  &lt;input type="button" value="Search Database" onClick="expandcontent('sc2')" style="font-size: 10px; font-family: Arial; background-color: #000080; color: #FFECFF"&gt;
  &lt;div id="sc1" class="switchcontent"&gt;
  
  &lt;div align="left"&gt;
    &lt;table border="0" width="500" height="16"&gt;
      &lt;tr&gt;
        &lt;td width="318" height="8" align="right"&gt;
  
  &lt;b&gt;&lt;font color="#000080" size="2" face="Verdana"&gt;DVD Title :&lt;/font&gt;&lt;/b&gt;&lt;/td&gt;
        &lt;td width="294" height="8"&gt;&lt;b&gt;&lt;font face="Verdana" size="2"&gt;&lt;input type="text" name="txtTitle" size="43"&gt;
          &lt;/font&gt;&lt;/b&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td width="318" height="10" align="right"&gt;
  &lt;b&gt;&lt;font color="#000080" size="2" face="Verdana"&gt;Length :&lt;/font&gt;&lt;/b&gt; &lt;/td&gt;
        &lt;td width="294" height="10"&gt;&lt;b&gt;&lt;font face="Verdana" size="2"&gt;&lt;input type="text" name="txtLength" size="8"&gt; &lt;/font&gt;&lt;/b&gt; &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td width="318" height="85" align="right" valign="top"&gt;
  &lt;b&gt;&lt;font face="Verdana" size="2" color="#000080"&gt;Note's :&lt;/font&gt;&lt;/b&gt; &lt;/td&gt;
        &lt;td width="294" height="85"&gt;&lt;font face="Verdana" size="2"&gt;
          &lt;textarea rows="6" name="txtNotes" cols="42"&gt;&lt;/textarea&gt;&lt;/font&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td width="318" height="11" align="right" valign="top"&gt;
  &lt;b&gt;
  &lt;font face="Verdana" size="2" color="#000080"&gt;Category :&lt;/font&gt; &lt;/b&gt; &lt;/td&gt;
        &lt;td width="294" height="11"&gt;&lt;font face="Verdana" size="2"&gt;&lt;select size="1" name="txtCat"&gt;
            &lt;option value="No Selection Picked"&gt;&amp;lt;- Please Select - &amp;gt;&lt;/option&gt;
            &lt;option value="Action/Adventure"&gt;Action/Adventure&lt;/option&gt;
            &lt;option value="Comedy"&gt;Comedy&lt;/option&gt;
            &lt;option value="Drama"&gt;Drama&lt;/option&gt;
            &lt;option value="Fantasy"&gt;Fantasy&lt;/option&gt;
            &lt;option value="Horror/Occult"&gt;Horror/Occult&lt;/option&gt;
            &lt;option value="Martial Arts"&gt;Martial Arts&lt;/option&gt;
            &lt;option value="Mystery/Whodunnit"&gt;Mystery/Whodunnit&lt;/option&gt;
            &lt;option value="Sports"&gt;Sports&lt;/option&gt;
            &lt;option value="War"&gt;War&lt;/option&gt;
            &lt;option value="Childrens"&gt;Childrens&lt;/option&gt;
            &lt;option value="Documentaries &amp;amp; Biographies"&gt;Documentaries &amp;amp;
            Biographies&lt;/option&gt;
            &lt;option value="Family"&gt;Family&lt;/option&gt;
            &lt;option value="General Interest (Leisure/Health)"&gt;General Interest
            (Leisure/Health)&lt;/option&gt;
            &lt;option value="Living World/Universe"&gt;Living World/Universe&lt;/option&gt;
            &lt;option value="Music/Performing Arts"&gt;Music/Performing Arts&lt;/option&gt;
            &lt;option value="Science Fiction"&gt;Science Fiction&lt;/option&gt;
            &lt;option value="Thriller"&gt;Thriller&lt;/option&gt;
            &lt;option value="Westerns"&gt;Westerns&lt;/option&gt;
          &lt;/select&gt; &lt;/font&gt; &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td width="318" height="5" align="right"&gt;
   &lt;/td&gt;
        &lt;td width="294" height="5"&gt; 
          &lt;p align="left"&gt;&lt;b&gt;&lt;font face="Verdana" size="2"&gt; &lt;input type="button" value="add" onclick="addUser" language="vbscript" style="background-color: #000080; color: #FFECFF"&gt;
        &lt;input type="button" name="btnUpdate" disabled value="update" onclick="updateUser" language="vbscript" style="background-color: #000080; color: #FFECFF"&gt;&lt;input type="hidden" name="txtID"&gt;
          &lt;/font&gt;&lt;/b&gt;&lt;/p&gt;
   &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="sc2" class="switchcontent"&gt;
  
  &lt;div align="left"&gt;
   &lt;table border="0" width="627" height="16"&gt;
      &lt;tr&gt;
        &lt;td width="126" height="8" align="right"&gt;
  
  &lt;b&gt;&lt;font color="#000080" size="2" face="Verdana"&gt;Search :&lt;/font&gt;&lt;/b&gt;&lt;/td&gt;
       &lt;td width="487" height="8"&gt;&lt;b&gt;&lt;font face="Verdana" size="2"&gt;&lt;input type="text" name="txtsrch" size="43"&gt;&lt;/font&gt;&lt;/b&gt;&lt;input type="button" name="btnSearch" value="Search" onclick="searchdata" language="vbscript" style="background-color: #000080; color: #FFECFF; font-family: Verdana; font-size: 10px"&gt;
        &lt;/td&gt;
        &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;fieldset&gt;
  &lt;legend&gt;&lt;b&gt;&lt;font face="Verdana" size="2"&gt;Search Results.&lt;/font&gt;&lt;/b&gt;&lt;/legend&gt;
  &lt;center&gt;&lt;div style="width: 600; height: 100; overflow: auto; border: 0px solid black" id="searchIT"&gt;&lt;/div&gt;
  &lt;/center&gt;
  &lt;/fieldset&gt;
  
  &lt;fieldset&gt;
  &lt;legend&gt;&lt;b&gt;&lt;font face="Verdana" size="2"&gt;DVD Count.&lt;/font&gt;&lt;/b&gt;&lt;/legend&gt;
  &lt;center&gt;&lt;div style="width: 600; height: 50; overflow: auto; border: 0px solid black" id="Count"&gt;&lt;/div&gt;
  &lt;/center&gt;
  &lt;/fieldset&gt;
  
  &lt;fieldset&gt;
  &lt;legend&gt;&lt;b&gt;&lt;font face="Verdana" size="2"&gt;Database Display.&lt;/font&gt;&lt;/b&gt;&lt;/legend&gt;
  &lt;center&gt;&lt;div style="width: 600; height: 362; overflow: auto; border: 0px solid black" id="thediv"&gt;&lt;/div&gt;
  &lt;/center&gt;
  &lt;/fieldset&gt;
  
  &lt;center&gt;
  &lt;/script&gt;
  </code></pre>