WinBatch Tech Support Home

Database Search

If you can't find the information using the categories below, post a question over in our WinBatch Tech Support Forum.

TechHome

WinBatch
OLE COM ADO CDO ADSI LDAP
OLE with MSIE
plus
User Samples

Can't find the information you are looking for here? Then leave a message over on our WinBatch Tech Support Forum.

DHMTL Type Ahead Search

;   here's a sample type-ahead feature for when you have to display large
;   amounts of data. very often the user knows what he wants, but unless
;   the data is sorted in a easy way, they may have to sift thru a lot of
;   information before they find what they're looking for.

;   this example allows you to construct a type-ahead feature, using DHTML
;   and the .scrollintoview method.

;   the data is maintained in a list, when the user types in the type-ahead
;   input control, when the ONKEYUP event is triggered, the script will place
;   the string TA into a object. The script will then inspect the object and
;   call the type ahead routine, which locates the first instance of the string
;   requested and scrolls it into view. Each item on the screen is given an
;   id (numbered) so when a match is found, that item can be called by name
;   and displayed.

#DefineSubRoutine startMSIE()
   Browser = ObjectOpen("InternetExplorer.Application")
   Browser.addressbar = @FALSE
   Browser.statusbar = @FALSE
   Browser.menubar = @FALSE
   Browser.toolbar = @FALSE
;   Browser.fullscreen = @true
   browser.visible = @TRUE
   url = "c:\AnyOldURL.html"
   browser.navigate(url)
   WaitForPageLoad()
   ;   setup the document object...
   browserDoc = Browser.Document
   all = browserdoc.all
   Return(browser)
#EndSubRoutine

#DefineSubroutine WaitForPageLoad()  ; assume Browser
   While browser.busy || browser.readystate == 1
      TimeDelay(0.5)
   EndWhile
   While browser.Document.ReadyState != "complete"
      TimeDelay(0.5)
   EndWhile
   return
#EndSubroutine


#DefineFunction initnum()
   list = ""
   list = ItemInsert("One", -1, list, @TAB)
   list = ItemInsert("Two", -1, list, @TAB)
   list = ItemInsert("Three", -1, list, @TAB)
   list = ItemInsert("Four", -1, list, @TAB)
   list = ItemInsert("Five", -1, list, @TAB)
   list = ItemInsert("Six", -1, list, @TAB)
   list = ItemInsert("Seven", -1, list, @TAB)
   list = ItemInsert("Eight", -1, list, @TAB)
   list = ItemInsert("Nine", -1, list, @TAB)
   list = ItemInsert("Ten", -1, list, @TAB)
   list = ItemInsert("Eleven", -1, list, @TAB)
   list = ItemInsert("Twelve", -1, list, @TAB)
   list = ItemInsert("Thirteen", -1, list, @TAB)
   list = ItemInsert("Fourteen", -1, list, @TAB)
   list = ItemInsert("Fifteen", -1, list, @TAB)
   list = ItemInsert("Sixteen", -1, list, @TAB)
   list = ItemInsert("Seventeen", -1, list, @TAB)
   list = ItemInsert("Eighteen", -1, list, @TAB)
   list = ItemInsert("Nineteen", -1, list, @TAB)
   list = ItemInsert("Twenty", -1, list, @TAB)
   list = ItemInsert("Twenty One", -1, list, @TAB)
   list = ItemInsert("Twenty Two", -1, list, @TAB)
   list = ItemInsert("Twenty Three", -1, list, @TAB)
   list = ItemInsert("Twenty Four", -1, list, @TAB)
   list = ItemInsert("Twenty Five", -1, list, @TAB)
   list = ItemInsert("Twenty Six", -1, list, @TAB)
   list = ItemInsert("Twenty Seven", -1, list, @TAB)
   list = ItemInsert("Twenty Eight", -1, list, @TAB)
   list = ItemInsert("Twenty Nine", -1, list, @TAB)
   list = ItemInsert("Thirty", -1, list, @TAB)
   list = ItemInsert("Thirty One", -1, list, @TAB)
   list = ItemInsert("Thirty Two", -1, list, @TAB)
   list = ItemInsert("Thirty Three", -1, list, @TAB)
   list = ItemInsert("Thirty Four", -1, list, @TAB)
   list = ItemInsert("Thirty Five", -1, list, @TAB)
   list = ItemInsert("Thirty Six", -1, list, @TAB)
   list = ItemInsert("Thirty Seven", -1, list, @TAB)
   list = ItemInsert("Thirty Eight", -1, list, @TAB)
   list = ItemInsert("Thirty Nine", -1, list, @TAB)
   list = ItemInsert("Forty", -1, list, @TAB)
   list = ItemInsert("Forty One", -1, list, @TAB)
   list = ItemInsert("Forty Two", -1, list, @TAB)
   list = ItemInsert("Forty Three", -1, list, @TAB)
   list = ItemInsert("Forty Four", -1, list, @TAB)
   list = ItemInsert("Forty Five", -1, list, @TAB)
   list = ItemInsert("Forty Six", -1, list, @TAB)
   list = ItemInsert("Forty Seven", -1, list, @TAB)
   list = ItemInsert("Forty Eight", -1, list, @TAB)
   list = ItemInsert("Forty Nine", -1, list, @TAB)
   list = ItemInsert("Fifty", -1, list, @TAB)
   list = ItemInsert("Fifty One", -1, list, @TAB)
   list = ItemInsert("Fifty Two", -1, list, @TAB)
   list = ItemInsert("Fifty Three", -1, list, @TAB)
   list = ItemInsert("Fifty Four", -1, list, @TAB)
   list = ItemInsert("Fifty Five", -1, list, @TAB)
   list = ItemInsert("Fifty Six", -1, list, @TAB)
   list = ItemInsert("Fifty Seven", -1, list, @TAB)
   list = ItemInsert("Fifty Eight", -1, list, @TAB)
   list = ItemInsert("Fifty Nine", -1, list, @TAB)
   list = ItemInsert("Sixty", -1, list, @TAB)
   list = ItemInsert("Sixty One", -1, list, @TAB)
   list = ItemInsert("Sixty Two", -1, list, @TAB)
   list = ItemInsert("Sixty Three", -1, list, @TAB)
   list = ItemInsert("Sixty Four", -1, list, @TAB)
   list = ItemInsert("Sixty Five", -1, list, @TAB)
   list = ItemInsert("Sixty Six", -1, list, @TAB)
   list = ItemInsert("Sixty Seven", -1, list, @TAB)
   list = ItemInsert("Sixty Eight", -1, list, @TAB)
   list = ItemInsert("Sixty Nine", -1, list, @TAB)
   list = ItemInsert("Seventy", -1, list, @TAB)
   list = ItemInsert("Seventy One", -1, list, @TAB)
   list = ItemInsert("Seventy Two", -1, list, @TAB)
   list = ItemInsert("Seventy Three", -1, list, @TAB)
   list = ItemInsert("Seventy Four", -1, list, @TAB)
   list = ItemInsert("Seventy Five", -1, list, @TAB)
   list = ItemInsert("Seventy Six", -1, list, @TAB)
   list = ItemInsert("Seventy Seven", -1, list, @TAB)
   list = ItemInsert("Seventy Eight", -1, list, @TAB)
   list = ItemInsert("Seventy Nine", -1, list, @TAB)
   list = ItemInsert("Eighty", -1, list, @TAB)
   list = ItemInsert("Eighty One", -1, list, @TAB)
   list = ItemInsert("Eighty Two", -1, list, @TAB)
   list = ItemInsert("Eighty Three", -1, list, @TAB)
   list = ItemInsert("Eighty Four", -1, list, @TAB)
   list = ItemInsert("Eighty Five", -1, list, @TAB)
   list = ItemInsert("Eighty Six", -1, list, @TAB)
   list = ItemInsert("Eighty Seven", -1, list, @TAB)
   list = ItemInsert("Eighty Eight", -1, list, @TAB)
   list = ItemInsert("Eighty Nine", -1, list, @TAB)
   list = ItemInsert("Ninety", -1, list, @TAB)
   list = ItemInsert("Ninety One", -1, list, @TAB)
   list = ItemInsert("Ninety Two", -1, list, @TAB)
   list = ItemInsert("Ninety Three", -1, list, @TAB)
   list = ItemInsert("Ninety Four", -1, list, @TAB)
   list = ItemInsert("Ninety Five", -1, list, @TAB)
   list = ItemInsert("Ninety Six", -1, list, @TAB)
   list = ItemInsert("Ninety Seven", -1, list, @TAB)
   list = ItemInsert("Ninety Eight", -1, list, @TAB)
   list = ItemInsert("Ninety Nine", -1, list, @TAB)
   Return(list)
#EndFunction

br = startMSIE()

LoadFile = ""

browserdoc.writeln(` `)
browserdoc.title = "Winbatch DHTML Type Ahead Example"

browserdoc.writeln('<style> .msg {font-size: 8pt; font-weight: bold; color: blue} .hidden {font-size: 1; font-weight: bold; color: blue}')
browserdoc.writeln('.hand {cursor: hand;} .blue {color: blue; font-size: 8pt}')
browserdoc.writeln('.scr    {width: 617; height:350; overflow:auto;}</style>')
browserdoc.writeln('<span id=LoadFile></span>')
browserdoc.writeln('<center><span class=blue><b>Quick Search<b></span><div id=Top></div><div class="msg scr" id=Main></div></center>')
ExitButton = `<input type=submit value="Exit" onclick="MenuSel.innerText='Exit'">`
browserdoc.writeln(`<br><center><span class="blue hand">%ExitButton%</span><br>`)
browserdoc.writeln('<span class=hidden id=MenuSel></span>')

;   build the type ahead input box...
TypeAhead = `<input class="blue" type="text" name="srchstr" onkeyup="MenuSel.innerText='ta'" size=50><br><br>`
;   display variable...
FiveSpace = `     `

;   build the display table...
ThisVar = ""
ThisVar = StrCat(ThisVar, '<table class=blue width=600 id=ChooseData border=1 style="BORDER-COLLAPSE: collapse">', @CRLF)
ThisVar = StrCat(ThisVar, '<thead><tr align=center><td><b>Data</b></td><td> </td></tr></thead>', @CRLF)

;   set the background color for a highlighted table cell...
bgcolor = "#FFFF66"

;   setup the list variables...
num = 77
numlist = initnum()

For co = 1 To num
;   set the mouse events for the left table cell...
   tcmouse = `onmouseover="this.style.backgroundColor='%bgcolor%'" onmouseout="this.style.backgroundColor='white'"`
   tcclick = ` onclick="MenuSel.innerText='%co%'" `
   ;   mouse events for the checkbox...
   cbmouse = `onmouseover="TCell%co%.style.backgroundColor='%bgcolor%'" onmouseout="TCell%co%.style.backgroundColor='white'"`
   ;   click event for the checkbox...
   cbclick = ` onclick="MenuSel.innerText='%co%'" `
   chkbox   = StrCat(`<input type="checkbox" `, cbmouse, cbclick, ` name="CHKBox%co%">`)
   num2txt = ItemExtract(co, numlist, @TAB)
   ThisVar = StrCat(ThisVar, `<tr><td class=blue id=TCell%co% `, tcmouse, tcclick, `>`, fivespace, num2txt, `</td><td width=10%% align=center>`, chkbox, `</td></tr>`, @CRLF)
Next
ThisVar = StrCat(ThisVar, '</table><br><br>', @CRLF)

all = browserdoc.all
Main = all.Main
Main.innerHTML = ThisVar

Top = all.Top
Top.innerHTML = TypeAhead

MenuSelection = all.MenuSel

While @TRUE
   Yield(2000)
   If MenuSelection.innerText <> ""
      numba = MenuSelection.innerText
      ;   check for exit...
      If numba == "Exit" Then Break
      ;   check to see if user wants to use type-ahead feature...
      If numba == "ta" Then GoSub TypeAheadCheck
      ;   clear the selection object's contents...
      MenuSelection.innerText = ""
      ;   last option is that a checkbox has been clicked, find which one
      ;   and turn it red or blue...
      If IsNumber(numba)
         obj = all.item("CHKBox%numba%")
         tobj = all.item("TCell%numba%")
         tobjstyle = tobj.style
         If obj.checked
            tobjstyle.color = "red"
         Else
            tobjstyle.color = "blue"
         EndIf
         ObjectClose(obj)
         ObjectClose(tobjstyle)
         ObjectClose(tobj)
      EndIf
   EndIf
EndWhile

;   when Exit button is clicked, build a list of checked items...
clist = ""
;
For co = 1 To num
   obj = all.item("CHKBox%co%")
   If obj.checked Then clist = ItemInsert(co, -1, clist, @TAB)
   ObjectClose(obj)
Next
;   
;   if it's not empty list, sort and display...
If clist <> ""
   clist = ItemSort(clist, @TAB)
   clist = StrReplace(clist, @TAB, @CRLF)
   Message("Selected Items", clist)
EndIf

br.quit

ObjectClose(MenuSelection)
ObjectClose(Main)
ObjectClose(Top)
ObjectClose(all)
ObjectClose(browserdoc)
ObjectClose(br)
ObjectClose(browser)

OLEList = IntControl(77, 62, 0, 0, 0)
If OLEList <> "" Then Message("Debug", OLEList)

Return
Exit

:TypeAheadCheck
obj = all.srchstr
txt = StrLower(obj.value)
ObjectClose(obj)
;
For co = 1 To num
   thiskey = StrLower(ItemExtract(co, numlist, @TAB))
   If StrSub(thiskey, 1, StrLen(txt)) == txt
      obj = all.item("TCell%co%")
      obj.scrollintoview()
      ObjectClose(obj)
      Return  ; to the first match...
   EndIf
Next
Return
Article ID:   W16112

File Created: 2004:08:02:10:37:20
Last Updated: 2004:08:02:10:37:20