JS实现仿google、百度搜索框输入信息智能提示的实现方法
内容摘要
本文实例讲述了JS实现仿google、百度搜索框输入信息智能提示的实现方法。分享给大家供大家参考。具体如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
文章正文
本文实例讲述了JS实现仿google、百度搜索框输入信息智能提示的实现方法。分享给大家供大家参考。具体如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <title>仿google、百度搜索框输入信息智能提示的实现</title> <style type= "text/css" media= "screen" > body { font: 11px arial; } .suggest_link { width:120px; background-color: #FFFFFF; padding: 2px 6px 2px 6px; } .suggest_link_over { width:120px; background-color: #E8F2FE; padding: 2px 6px 2px 6px; } #suggestResult { position: absolute; background-color: #FFFFFF; text-align: left; border: 1px solid #000000; } /*input*/ .input_on { padding: 2px 8px 0pt 3px; height: 18px; border: 1px solid #999; background-color: #FFFFCC; } .input_off { padding: 2px 8px 0pt 3px; height: 18px; border: 1px solid #CCC; background-color: #FFF; } .input_move { padding: 2px 8px 0pt 3px; height: 18px; border: 1px solid #999; background-color: #FFFFCC; } .input_out { /*height:16px;默认高度*/ padding: 2px 8px 0pt 3px; height: 18px; border: 1px solid #CCC; background-color: #FFF; } </style> <script language= "javascript" type= "text/javascript" > var $ = document.getElementById; //创建XMLHttpRequest对象 function createXMLHttpRequest() { var obj; if (window.XMLHttpRequest) { //Mozilla 浏览器 obj = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE浏览器 try { obj = new ActiveXObject( "Msxml2.XMLHTTP" ); } catch (e) { try { obj = new ActiveXObject( "Microsoft.XMLHTTP" ); } catch (e) { } } } return obj; } //当输入框的内容变化时,调用该函数 function searchSuggest() { var inputField = $( "txtSearch" ); var suggestText = $( "suggestResult" ); if (inputField.value.length > 0) { var o = createXMLHttpRequest(); var url = "SearchResult.ashx?searchText=" + escape(inputField.value); o.open( "GET" , url, true); o.onreadystatechange = function () { if (o.readyState == 4) { if (o.status == 200) { var sourceItems = o.responseText.split( "\n" ); if (sourceItems.length > 1) { suggestText.style.display = "" ; suggestText.innerHTML = "" ; for ( var i = 0; i < sourceItems.length - 1; i++) { var sourceText = sourceItems[i].split( "@" )[1]; var sourceValue = sourceItems[i].split( "@" )[0]; var s = "<div onmouseover=\"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" ; } } function delayExecute() { $( "valueResult" ).value = "" ; window.setTimeout( function () { searchSuggest() }, 800); //延时处理 } function suggestOver(div_value) { div_value.className = "suggest_link_over" ; } function suggestOut(div_value) { div_value.className = "suggest_link" ; } function setSearch(a, b) { $( "txtSearch" ).value = a; $( "valueResult" ).value = b; var div = $( "suggestResult" ); div.innerHTML = "" ; div.style.display = "none" ; } function showResult() { alert($( "txtSearch" ).value + $( "valueResult" ).value); } </script> </head> <body> <form id= "form1" action= "" > <input type= "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'" /> <input type= "hidden" id= "valueResult" name= "valueResult" value= "" /> <br /> <div id= "suggestResult" style= "display: none" > </div> <br/> <input id= "button1" type= "button" value= "提交" onclick= "showResult();" /> </form> </body> </html> |
服务器端C#代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <%@ WebHandler Language= "C#" Class= "SearchResult" %> using System; using System.Web; using System.Data; public class SearchResult : IHttpHandler { public void ProcessRequest (HttpContext context) { object QueryWord=context.Request.QueryString[ "searchText" ]; if (QueryWord != null) { if (QueryWord.ToString().Trim().Length > 0) { DataTable dt = getDB(); string returnText = "" ; if (dt != null && dt.Rows. Count > 0) { DataRow[] dr = dt.Select( " name like '%" + QueryWord .ToString()+ "%' " ); if (dr.Length > 0) { for (int i = 0; i < dr.Length; i++) { //可设置返回多字符串 returnText += dr[i][ "id" ].ToString() + "@" + dr[i][ "name" ].ToString() + "\n" ; } } } context.Response.Write(returnText); context.Response. End (); } } } public bool IsReusable { get { return false; } } /// <summary> /// 获取数据源的方法 /// </summary> /// <returns>数据源</returns> private DataTable getDB() { DataTable dt = new DataTable(); dt.Columns.Add( "id" ); dt.Columns.Add( "name" ); dt.Columns.Add( "age" ); dt.Rows.Add( new object[] { "000001" , "张三" , "26" }); dt.Rows.Add( new object[] { "000002" , "张晓" , "26" }); dt.Rows.Add( new object[] { "000003" , "张岚" , "27" }); dt.Rows.Add( new object[] { "000004" , "李四" , "25" }); dt.Rows.Add( new object[] { "000005" , "李星" , "27" }); return dt; } } |
希望本文所述对大家的javascript程序设计有所帮助。
代码注释