這篇文章主要介紹了JS實現仿google、百度搜索框輸入信息智能提示的實現方法,實例分析了javascript實現智能提示功能的技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了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; } }以上介紹了JS實現仿google、百度搜索框輸入信息智能提示的實現方法， 希望本文所述對大家的javascript程序設計有所幫助。