JS实现仿google、百度搜索框输入信息智能提示的实现方法
本文实例讲述了JS实现仿google、百度搜索框输入信息智能提示的实现方法。分享给大家供大家参考。具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>仿google、百度搜索框输入信息智能提示的实现</title>
<styletype="text/css"media="screen">
body
{
font:11pxarial;
}
.suggest_link
{
width:120px;
background-color:#FFFFFF;
padding:2px6px2px6px;
}
.suggest_link_over
{
width:120px;
background-color:#E8F2FE;
padding:2px6px2px6px;
}
#suggestResult
{
position:absolute;
background-color:#FFFFFF;
text-align:left;
border:1pxsolid#000000;
}
/*input*/
.input_on
{
padding:2px8px0pt3px;
height:18px;
border:1pxsolid#999;
background-color:#FFFFCC;
}
.input_off
{
padding:2px8px0pt3px;
height:18px;
border:1pxsolid#CCC;
background-color:#FFF;
}
.input_move
{
padding:2px8px0pt3px;
height:18px;
border:1pxsolid#999;
background-color:#FFFFCC;
}
.input_out
{
/*height:16px;默认高度*/
padding:2px8px0pt3px;
height:18px;
border:1pxsolid#CCC;
background-color:#FFF;
}
</style>
<scriptlanguage="javascript"type="text/javascript">
var$=document.getElementById;
//创建XMLHttpRequest对象
functioncreateXMLHttpRequest(){
varobj;
if(window.XMLHttpRequest){//Mozilla浏览器
obj=newXMLHttpRequest();
}
elseif(window.ActiveXObject){//IE浏览器
try{
obj=newActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
obj=newActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
returnobj;
}
//当输入框的内容变化时，调用该函数
functionsearchSuggest(){
varinputField=$("txtSearch");
varsuggestText=$("suggestResult");
if(inputField.value.length>0){
varo=createXMLHttpRequest();
varurl="SearchResult.ashx?searchText="+escape(inputField.value);
o.open("GET",url,true);
o.onreadystatechange=function(){
if(o.readyState==4){
if(o.status==200){
varsourceItems=o.responseText.split("\n");
if(sourceItems.length>1){
suggestText.style.display="";
suggestText.innerHTML="";
for(vari=0;i<sourceItems.length-1;i++){
varsourceText=sourceItems[i].split("@")[1];
varsourceValue=sourceItems[i].split("@")[0];
vars="<divonmouseover=\"javascript:suggestOver(this);\"";
s+="onmouseout=\"javascript:suggestOut(this);\"";
s+="onclick=\"javascript:setSearch('"+sourceText+"','"+sourceValue+"');\"";
s+="class=\"suggest_link\">"+sourceText+"</div>";
suggestText.innerHTML+=s;
}
}
else{
suggestText.style.display="none";
}
}
}
};//指定响应函数
o.send(null);//发送请求
}
else{
suggestText.style.display="none";
}
}
functiondelayExecute(){
$("valueResult").value="";
window.setTimeout(function(){searchSuggest()},800);
//延时处理
}
functionsuggestOver(div_value){
div_value.className="suggest_link_over";
}
functionsuggestOut(div_value){
div_value.className="suggest_link";
}
functionsetSearch(a,b){
$("txtSearch").value=a;
$("valueResult").value=b;
vardiv=$("suggestResult");
div.innerHTML="";
div.style.display="none";
}
functionshowResult(){
alert($("txtSearch").value+$("valueResult").value);
}
</script>
</head>
<body>
<formid="form1"action="">
<inputtype="text"id="txtSearch"name="txtSearch"onkeyup="delayExecute();"size="20"
class="input_out"onfocus="this.className='input_on';this.onmouseout=''"
onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};"
onmousemove="this.className='input_move'"onmouseout="this.className='input_out'"/>
<inputtype="hidden"id="valueResult"name="valueResult"value=""/>
<br/>
<divid="suggestResult"style="display:none">
</div>
<br/>
<inputid="button1"type="button"value="提交"onclick="showResult();"/>
</form>
</body>
</html>
服务器端C#代码
<%@WebHandlerLanguage="C#"Class="SearchResult"%>
usingSystem;
usingSystem.Web;
usingSystem.Data;
publicclassSearchResult:IHttpHandler{
publicvoidProcessRequest(HttpContextcontext){
objectQueryWord=context.Request.QueryString["searchText"];
if(QueryWord!=null)
{
if(QueryWord.ToString().Trim().Length>0)
{
DataTabledt=getDB();
stringreturnText="";
if(dt!=null&&dt.Rows.Count>0)
{
DataRow[]dr=dt.Select("namelike'%"+QueryWord.ToString()+"%'");
if(dr.Length>0)
{
for(inti=0;i<dr.Length;i++)
{
//可设置返回多字符串
returnText+=dr[i]["id"].ToString()+"@"+dr[i]["name"].ToString()+"\n";
}
}
}
context.Response.Write(returnText);
context.Response.End();
}
}
}
publicboolIsReusable{
get{
returnfalse;
}
}
///<summary>
///获取数据源的方法
///</summary>
///<returns>数据源</returns>
privateDataTablegetDB()
{
DataTabledt=newDataTable();
dt.Columns.Add("id");
dt.Columns.Add("name");
dt.Columns.Add("age");
dt.Rows.Add(newobject[]{"000001","张三","26"});
dt.Rows.Add(newobject[]{"000002","张晓","26"});
dt.Rows.Add(newobject[]{"000003","张岚","27"});
dt.Rows.Add(newobject[]{"000004","李四","25"});
dt.Rows.Add(newobject[]{"000005","李星","27"});
returndt;
}
}
希望本文所述对大家的javascript程序设计有所帮助。