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程序设计有所帮助。