仿百度谷歌搜索框下拉提示效果,带数据库的ASP程序代码
input.asp
<!--#include file="conn.asp"-->
<%
keyWrods = Request("keyword")
Set rs = Server.CreateObject("ADODB.Recordset")
sql = "select * from peisongbu where peisongname like '%"&keyWrods&"%'"
rs.open sql,conn,1,1
if not (rs.bof and rs.eof) then
do while not rs.eof %>
<a style="text-decoration:none;width:100%;align:left;padding-left:0px"
onmouseover="this.style.backgroundColor='#6699cc';document.getElementById('keytishi').focus();document.getElementById('search').value='<%Response.Write(escape(rs("peisongname")))%>'"
onmouseout="this.style.backgroundColor='#ffffff'"
onclick="input('<%Response.Write(escape(rs("peisongname")))%>');">
<%Response.Write(escape(rs("peisongname")))%></a><br>
<%
rs.movenext
loop
end if
rs.close
set rs = nothing
conn.close
Set conn = nothing
%>
inputTip.html
<script type="text/javascript">
<!-- //XMLHttpRequest
var xmlhttp;
try
{ xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}catch(e)
{ try{
xmlhttp= new ActiveXObject('Microsoft.XMLHTTP'); }
catch(e)
{
try{
xmlhttp= new XMLHttpRequest(); }
catch(e)
{} } }
function getKeyWord()
{
var obj = document.getElementById("search");
if(obj.value==""){
document.getElementById("keytishi").innerHTML = "";
document.getElementById("keytishi").style.display = "none";
return;
}
var top=20;
var left=1;
xmlhttp.open("get","input.asp?keyword="+document.getElementById("search").value,true);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4)
{
if(xmlhttp.status == 200)
{
if(xmlhttp.responseText!=""){
document.getElementById("keytishi").innerHTML = unescape(xmlhttp.responseText);
document.getElementById("keytishi").style.left = left + "px";
document.getElementById("keytishi").style.top = (top + 5) + "px";
document.getElementById("keytishi").style.display = "block";
document.getElementById("keytishi").style.width = "300px";
document.getElementById("keytishi").style.height = "auto";
document.getElementById("keytishi").style.border = "1px solid #6699cc";
}else{
document.getElementById("keytishi").innerHTML = "";
document.getElementById("keytishi").style.display = "none";
} }
else
{
}
}
}
xmlhttp.setRequestHeader("If-Modified-Since","0");
xmlhttp.send(null);
//alert(event.keyCode);
}
function input(str){
document.getElementById("search").value=str;
document.getElementById("keytishi").innerHTML = "";
document.getElementById("keytishi").style.display = "none";
}
function open1(){
//alert(document.getElementById('search').value);
url="products.asp?keyword="+document.getElementById('search').value;
window.open(url,'_blank','');
}
//--> </script>
<input type="text" class="keyword" id="search" name="search" onKeyUp="getKeyWord();" onClick="getKeyWord();" />
<input type="button" value="Search" onClick="open1();">
<div id="keytishi" style="display:'';width:0px;height:0px;" onblur="document.getElementById('keytishi').style.display='none';" ></div>
：