I have the following script that I grabbed partially from a message here. The problem that I'm having is that once the suggestions are displayed, I'd like for the user to be able to use the keyboard arrows to traverse through them. I don't know how to do that.
Also, I think that autosuggest can leave the database vulnerable to abuse. What recommendations do you have to protect from brute force that would tie up the database?
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!--#include virtual="inc_db_setup.asp"-->
<%
response.expires=-1
q=lcase(request.querystring("q"))
q = replace(q,"'","''")
t=replace(request.querystring("t"),"'","''")
if t="" then t = 1
hint=""
if len(q)>0 then
Set rsWords = Server.CreateObject("ADODB.Recordset")
rsWords.ActiveConnection = strBFCon
rsWords.Source = "SELECT top 10 group_title FROM groups WHERE (group_title LIKE'" + q + "%') and group_type = "&t&" ORDER BY group_title ASC;"
rsWords.CursorType = 2
rsWords.CursorLocation = 2
rsWords.LockType = 3
rsWords.Open()
rsWords_numRows = 5
If Not rsWords.EOF Then
response.write "<ul>"
Do While Not rsWords.EOF
hint = hint & " <option value="""&rsWords("group_title")&""">" & rsWords("group_title") & "</option>"
rsWords.MoveNext()
Loop
response.write "</ul>"
End If
if trim(hint)="" then
response.write("no suggestion")
else
response.write(hint)
end if
rsWords.Close()
Set rsWords = Nothing
end if 'if len(q)>0
%>
<script type="text/javascript">
var xmlHttp
function showHint(str, box, thisForm, autoSubmit)
{ if ( str.length > 2 )
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="testautosuggest.asp";
url=url+"?q="+str;
url=url+"&t="+box;
url=url+"&f="+thisForm;
url=url+"&a="+autoSubmit;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHt tp.responseText;
}
}
}
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;
}
//this function allows for Clickable suggestions
function setTextBox(thisText,thisBox,thisForm,autoSubmit){
document.getElementById(thisBox).value = thisText
}
</script>
<!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>
</head>
<body>
<form action="search.asp" method="post">
<input type="text" id="txt1" onkeyup="showHint(this.value,'1','form1',true)" />
<select multiple="multiple" id="txtHint"></select>
<input type="hidden" id="t" name="t" value="1">
</form>
</body>
</html>
<!--#include virtual="inc_db_closeout.asp"-->
