本文實例講述了JS實現(xiàn)仿google、百度搜索框輸入信息智能提示的實現(xiàn)方法。分享給大家供大家參考。具體如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <title>仿google、百度搜索框輸入信息智能提示的實現(xiàn)</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;默認(rèn)高度*/ padding: 2px 8px 0pt 3px; height: 18px; border: 1px solid #CCC; background-color: #FFF; } </style> <script language="javascript" type="text/javascript"> var $ = document.getElementById; //創(chuàng)建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; } //當(dāng)輸入框的內(nèi)容變化時，調(diào)用該函數(shù) 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 = "]; 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"; } } } }; //指定響應(yīng)函數(shù) o.send(null); // 發(fā)送請求 } 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>
服務(wù)器端C#代碼
<%@ 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++) { //可設(shè)置返回多字符串 returnText += dr[i]["id"].ToString() + "@" + dr[i]["name"].ToString() + "\n"; } } } context.Response.Write(returnText); context.Response.End(); } } } public bool IsReusable { get { return false; } } /// <summary> /// 獲取數(shù)據(jù)源的方法 /// </summary> /// <returns>數(shù)據(jù)源</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; } }
更多信息請查看IT技術(shù)專欄
公眾號
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試