日期:2014-05-16 浏览次数:20705 次
function change(sword){ highlight=-1; var url = "/searchAjax.asp?q=" + sword + "&\r\=" + Math.random(); ajax.get( url, function(obj) { if (obj.responseText=="err30"){ set($("sAlert"),""); $("sAlert").style.display="none"; } else { set($("sAlert"),obj.responseText); $("sAlert").style.display="block"; return true; } } ); } function hideSword(){ if(getFocus==false){ set($("sAlert"),""); $("sAlert").style.display="none"; highlight=-2; }else{ return true; } } function S(OBJ){ $('searchword').value=OBJ.innerHTML; $('sAlert').style.display='none'; $('formsearch').submit(); } function checkKey(e,sword){ if(e.keyCode==13){ $('sAlert').style.display='none'; check(); }else if(e.keyCode==40){ if(highlight==-2){change(sword);return false;} highlight++; var total = $('sTab').rows.length-1; if(highlight>total){highlight=0;} for(i=0;i<=total;i++){ if(i==highlight){ $('sTab').rows[i].style.background='#1181bf'; $('sTab').rows[i].style.color='#FFFFFF'; $('searchword').value=$('sTab').rows[i].cells[0].innerHTML; } else { $('sTab').rows[i].style.background='#FFFFFF'; $('sTab').rows[i].style.color='#000000'; } } }else if(e.keyCode==38){ highlight--; var total = $('sTab').rows.length-1; if(highlight<0){highlight=total;} for(i=0;i<=total;i++){ if(i==highlight){ $('sTab').rows[i].style.background='#1181bf'; $('sTab').rows[i].style.color='#FFFFFF'; $('searchword').value=$('sTab').rows[i].cells[0].innerHTML; } else { $('sTab').rows[i].style.background='#FFFFFF'; $('sTab').rows[i].style.color='#000000'; } } if(highlight<0){highlight=0} }else{change(sword);} }
------解决方案--------------------
搜索建议(Searching Suggestion),已布置好样式
大家应该都看到过 GOOGLE 的搜索建议,就是当我们在输入关键词时,GOOGLE 会根据我们目前已输入的字显示相关的关键字建议,这就是搜索建议,现在很多网站都实现该友好的功能,如 YAHOO、狗狗搜索等。
实现该功能的思路就是:
在关键字输入框里,当用户按键弹起时,发送输入框里的字符串到服务器。
服务器根据收到客户端发来的字进入匹配搜索
将匹配用户已输入字的记录回发到客户端
客户端收到服务端的响应,输出建议。
其实就是异步回发(AJAX)。
下面是一个实例,实例实现的是搜索 SQL Server 默认数据库 Northwind 表 Customers 字段 CustomerID,当用户要输入框输入字时,返回该字段值与用户输入的字开头匹配的记录,即 CustomerID LIKE '用户已输入的字%'。
样式已设置好,显示建议的行为绝对位置,所以该行不会显示网页上的内容。
文件名:WordSuggest.aspx
源码如下:
.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WordSuggest.aspx.cs" Inherits="WordSuggest" %>