本文实例讲述了JS实现仿google、百度搜索框输入信息智能提示的实现方法。分享给大家供大家参考。具体如下：
<!DOCTYPE html PUBLIC \XHTML 1.0 Transitional//EN\\<html xmlns=\<head> <title>仿google、百度搜索框输入信息智能提示的实现</title> <style type=\media=\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=\type=\var $ = document.getElementById; //创建XMLHttpRequest对象 function createXMLHttpRequest() { var obj; if (window.XMLHttpRequest) { //Mozilla 浏览器 obj = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE浏览器 try { obj = new ActiveXObject(\} catch (e) { try { obj = new ActiveXObject(\当输入框的内容变化时，调用该函数 function searchSuggest() { var inputField = $(\$(\= \+ escape(inputField.value); o.open(%url, true); o.onreadystatechange = function () { if (o.readyState == 4) { if (o.status == 200) { var sourceItems = o.responseText.split(\if (sourceItems.length > 1) { suggestText.style.display = \suggestText.innerHTML = \var sourceValue = sourceItems[i].split(\var s = \onmouseover=\\\\s += \onmouseout=\\\\s += \onclick=\\\+ sourceText + \+ sourceValue + \\s += \class=\\\>\+ sourceText + \suggestText.innerHTML += s; } } else { suggestText.style.display = \指定响应函数 o.send(null); // 发送请求 } else { suggestText.style.display = \{ searchSuggest() }, 800); //延时处理 } function suggestOver(div_value) { div_value.className = \} function suggestOut(div_value) { div_value.className = \var div = $(\div.innerHTML = \div.style.display = \} function showResult() { alert($(\+ $(\} </script> </head> <body> <form id=\action=\<input type=\id=\name=\onkeyup=\size=\class=\onfocus=\
onblur=\onmousemove=\onmouseout=\/> <input type=\id=\name=\value=\/> <br />
<div id=\style=\none\</div> <br/> <input id=\type=\value=\提交\onclick=\/> </form> </body> </html> 服务器端C#代码
<%@ WebHandler Language=\Class=\%> using System; using System.Web; using System.Data; public class SearchResult : IHttpHandler { public void ProcessRequest (HttpContext context) { object QueryWord=context.Request.QueryString[\if (QueryWord != null) { if (QueryWord.ToString().Trim().Length > 0) { DataTable dt = getDB(); string returnText = \(dt != null && dt.Rows.Count > 0) { DataRow[] dr = dt.Select(\name like '%\+ QueryWord .ToString()+ \可设置返回多字符串 returnText += dr[i][\+ \+ dr[i][\+ \} } } 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(\dt.Columns.Add(\dt.Columns.Add(\dt.Rows.Add(new object[] { \\张三\\}); dt.Rows.Add(new object[] { \张晓\张岚\李四\{ \李星\
更多信息请查看IT技术专栏
JS实现仿google、百度搜索框输入信息智能提示的实现方法
