##################################HTML 代码:
<input name="searchkey" type="text" style="FONT-SIZE:" onFocus="this.select()" onBlur="hideDiv();" onclick="keyupdeal(event);" onKeyDown="keydowndeal(event);" onKeyUp="keyupdeal(event);" onKeyPress="if (browser=='IE'){keyupdeal(event);}" onMouseOver="this.focus()" value="" size="21" maxlength="30" 9pt; background-color:="background-color:" #ffffff class="keyword" id="searchkey" autocomplete="off"/>
<div id="keytishi"></div>
##################################JS 代码:
<script>
function onsearchkeyblur()
{
document.getElementById("keytishi").style.display = "none";
}
<!--
//建立XMLHttpRequest对象
var xmlhttp;
var browser;
browser='IE';//默认为IE浏览器
var j=-1;
var temp_str;
var $=function(node){
return document.getElementById(node);
}
var $$=function(node){
return document.getElementsByTagName(node);
}
try{
xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
try{
xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
try{
xmlhttp= new XMLHttpRequest();
browser="Mozilla";
}catch(e){}
}
}
function getKeyWord(){
var obj = document.getElementById("searchkey");//获取文本域对象
if(obj.name != "searchkey"){return;}
if(obj.value==""){
return;
}
var top=0;
var left=0;
while(obj){//此循环得到文件域对象在页面中的绝对位置
top += obj["offsetTop"];
left += obj["offsetLeft"];
obj = obj.offsetParent;
}
xmlhttp.open("get","CL_KWIPT.asp?keyword="+document.getElementById("searchkey").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 + 25) + "px";//设置提示层的位置,上
document.getElementById("keytishi").style.display = "block";//设置提示层可见
}else{
document.getElementById("keytishi").innerHTML = "";//清空提示层
document.getElementById("keytishi").style.display = "none";//设置提示层不可见
}
}
else{
}
}
}
xmlhttp.setRequestHeader("If-Modified-Since","0");
xmlhttp.send(null);
}
function hideDiv(){
document.getElementById("keytishi").innerHTML = "";//清空提示层
document.getElementById("keytishi").style.display = "none";//设置提示层不可见
}
//监听键盘事件
function keyupdeal(e){
var keyc;
if(window.event){
keyc=e.keyCode;
}
else if(e.which){
keyc=e.which;
}
if(keyc!=40 && keyc!=38){
getKeyWord();
temp_str=$("searchkey").value;
}
}
function set_style(num){
for(var i=0;i<$$("li").length;i++){
var li_node=$$("li")[i];
if(li_node.getAttribute("id")=='ajax'){
li_node.className="";
li_node.childNodes[1].className="r";
li_node.style.backgroundColor="#FFFFFF";
}
}
if(j>=0 && j<$$("li").length){
var i_node=$$("li")[j];
if(i_node.getAttribute("id")=='ajax'){
i_node.style.backgroundColor="#3366CC";
i_node.className='focusLi';
i_node.childNodes[1].className='r_focus';
}
}
}
function mo(nodevalue){
j=nodevalue;
set_style(j);
if(j>=0 && j<$$("li").length){
$("searchkey").value=$$("li")[j].childNodes[0].childNodes[0].nodeValue;
}
else{
$("searchkey").value=temp_str;
}
}
function form_submit(){
if(j>=0 && j<$$("li").length){
$("searchkey").value=$$("li")[j].childNodes[0].childNodes[0].nodeValue;
}
hideDiv();
//document.search.submit();
}
function hide_suggest(){
var nodes=document.body.childNodes;
for(var i=0;i<nodes.length;i++){
if(nodes[i]!=$("searchkey")){
$("keytishi").innerHTML="";
}
}
}
function keydowndeal(e){
var keyc;
if(window.event){
keyc=e.keyCode;
}
else if(e.which){
keyc=e.which;
}
if(keyc==40 || keyc==38){
if(keyc==40){
if(j<$$("li").length){
j++;
if(j>=$$("li").length){
j=-1;
}
}
if(j>=$$("li").length){
j=-1;
}
}
if(keyc==38){
if(j>=0){
j--;
if(j<=-1){
j=$$("li").length;
}
}
else{
j=$$("li").length-1;
}
}
set_style(j);
if(j>=0 && j<$$("li").length){
$("searchkey").value=$$("li")[j].childNodes[0].childNodes[0].nodeValue;
}
else{
$("searchkey").value=temp_str;
}
}
}
//-->
// JavaScript Document
</script>
########################################### CSS样式
<style type="text/css">
<!--
.keyword{width:150px; height:20px; border:#666666 1px solid;}/**//*文本框样式*/
#keytishi{width:300px; height:auto; border:#666666 1px solid; position:absolute; background-color:#FFFFFF; display:none;z-index:9999;}/**//*提示层样式*/
#keytishi ul{
margin:0px;
padding: 0px;
}/**//*提示层样式*/
#keytishi ul li{
margin:0;
list-style-type:none;
line-height:16px;
height:16px;
font-size:12px;
padding:2px;
cursor:pointer;
background-color: #FFFFFF;
}
.focusLi{
margin:0;
list-style-type:none;
line-height:16px;
height:16px;
font-size:12px;
padding:2px;
background-color: #3366CC;
cursor:pointer;
color: #FFFFFF;
}
.l{margin:0px 0px 0px 3px;float:left;}
.r{color: #006600;float:right;}
.r_focus{color: #FFFFFF;float:right;}
-->
</style>
######################################## 后台代码
<!--#include file="conn.asp"-->
<%
dim rs
dim sql
dim keyWords
keyWrods = Request("keyword")
Set rs = Server.CreateObject("ADODB.Recordset")
sql = "select top 10 C_KWords,C_Pnum from shop_keywordCount where C_KWords like '"&keyWrods&"%' and C_Pnum<>0 or C_Pnum<>null order by C_Pnum desc"
rs.open sql,conn,1,1
if not (rs.bof and rs.eof) then
Response.Write("<ul>")
dim liNo
liNo = 0
do while not rs.eof
%>
<li onmouseover="mo(this.value)" onclick="form_submit()" value="<%= liNo %>" id='ajax'><span class="l"><%Response.Write(escape(rs("C_KWords")&"</span><span class='r'>约"&rs("C_Pnum")&"件商品</span>"))%></li>
<%
rs.movenext
liNo = liNo+1
loop
Response.Write("<ul>")
end if
rs.close
set rs = nothing
conn.close
Set conn = nothing
%>