仿google、百度搜索框输入信息智能提示的实现 兼容主流浏览器

最新推荐文章于 2018-10-18 18:35:41 发布
最新推荐文章于 2018-10-18 18:35:41 发布
阅读量884 收藏
点赞数
分类专栏： jQuery
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>仿google、百度搜索框输入信息智能提示的实现 兼容主流浏览器</title>  
  5.     <style type="text/css" media="screen">  
  6.         body  
  7.         {  
  8.             font: 11px arial;  
  9.         }  
  10.         .suggest_link  
  11.         {  
  12.             width:120px;  
  13.             background-color: #FFFFFF;  
  14.             padding: 2px 6px 2px 6px;  
  15.         }  
  16.         .suggest_link_over  
  17.         {  
  18.             width:120px;  
  19.             background-color: #E8F2FE;  
  20.             padding: 2px 6px 2px 6px;  
  21.         }  
  22.         #suggestResult  
  23.         {  
  24.             position: absolute;  
  25.             background-color: #FFFFFF;  
  26.             text-align: left;  
  27.             border: 1px solid #000000;  
  28.         }  
  29.         /*input*/  
  30.         .input_on  
  31.         {  
  32.             padding: 2px 8px 0pt 3px;  
  33.             height: 18px;  
  34.             border: 1px solid #999;  
  35.             background-color: #FFFFCC;  
  36.         }  
  37.         .input_off  
  38.         {  
  39.             padding: 2px 8px 0pt 3px;  
  40.             height: 18px;  
  41.             border: 1px solid #CCC;  
  42.             background-color: #FFF;  
  43.         }  
  44.         .input_move  
  45.         {  
  46.             padding: 2px 8px 0pt 3px;  
  47.             height: 18px;  
  48.             border: 1px solid #999;  
  49.             background-color: #FFFFCC;  
  50.         }  
  51.         .input_out  
  52.         {  
  53.             /*height:16px;默认高度*/  
  54.             padding: 2px 8px 0pt 3px;  
  55.             height: 18px;  
  56.             border: 1px solid #CCC;  
  57.             background-color: #FFF;  
  58.         }  
  59.     </style>  
  60.     <script language="javascript" type="text/javascript">  
  61.         var $ = document.getElementById;  
  62.         //创建XMLHttpRequest对象        
  63.         function createXMLHttpRequest() {  
  64.             var obj;  
  65.             if (window.XMLHttpRequest) { //Mozilla 浏览器   
  66.                 obj = new XMLHttpRequest();  
  67.             }  
  68.             else if (window.ActiveXObject) { // IE浏览器   
  69.                 try {  
  70.                     obj = new ActiveXObject("Msxml2.XMLHTTP");  
  71.                 } catch (e) {  
  72.                     try {  
  73.                         obj = new ActiveXObject("Microsoft.XMLHTTP");  
  74.                     } catch (e) { }  
  75.                 }  
  76.             }  
  77.             return obj;  
  78.         }  
  79.         //当输入框的内容变化时，调用该函数  
  80.         function searchSuggest() {  
  81.             var inputField = $("txtSearch");  
  82.             var suggestText = $("suggestResult");  
  83.             if (inputField.value.length > 0) {  
  84.                 var o = createXMLHttpRequest();  
  85.                 var url = "SearchResult.ashx?searchText=" + escape(inputField.value);  
  86.                 o.open("GET", url, true);  
  87.                 o.onreadystatechange = function () {  
  88.                     if (o.readyState == 4) {  
  89.                         if (o.status == 200) {  
  90.                             var sourceItems = o.responseText.split("\n");  
  91.                             if (sourceItems.length > 1) {  
  92.                                 suggestText.style.display = "";  
  93.                                 suggestText.innerHTML = "";  
  94.                                 for (var i = 0; i < sourceItems.length - 1; i++) {  
  95.                                     var sourceText = sourceItems[i].split("@")[1];  
  96.                                     var sourceValue = sourceItems[i].split("@")[0];  
  97.                                     var s = "<div οnmοuseοver=\"javascript:suggestOver(this);\" ";  
  98.                                     s += " onmouseout=\"javascript:suggestOut(this);\" ";  
  99.                                     s += " onclick=\"javascript:setSearch('" + sourceText + "','" + sourceValue + "');\" ";  
  100.                                     s += " class=\"suggest_link\" >" + sourceText + "</div>";  
  101.                                     suggestText.innerHTML += s;  
  102.                                 }  
  103.                             }  
  104.                             else {  
  105.                                 suggestText.style.display = "none";  
  106.                             }  
  107.                         }  
  108.                     }  
  109.                 };  //指定响应函数   
  110.                 o.send(null); // 发送请求   
  111.             }  
  112.             else {  
  113.                 suggestText.style.display = "none";  
  114.             }  
  115.         }  
  116.   
  117.         function delayExecute() {  
  118.             $("valueResult").value = "";  
  119.             window.setTimeout(function () { searchSuggest() }, 800);   //延时处理  
  120.         }  
  121.   
  122.         function suggestOver(div_value) {  
  123.             div_value.className = "suggest_link_over";  
  124.         }  
  125.         function suggestOut(div_value) {  
  126.             div_value.className = "suggest_link";  
  127.         }  
  128.         function setSearch(a, b) {  
  129.             $("txtSearch").value = a;  
  130.             $("valueResult").value = b;  
  131.             var div = $("suggestResult");  
  132.             div.innerHTML = "";  
  133.             div.style.display = "none";  
  134.         }  
  135.         function showResult() {  
  136.             alert($("txtSearch").value + $("valueResult").value);  
  137.         }  
  138.   
  139.   
  140.     </script>  
  141. </head>  
  142. <body>  
  143.     <form id="form1" action="">  
  144.     <input type="text" id="txtSearch" name="txtSearch" onkeyup="delayExecute();" size="20"  
  145.         class="input_out" onfocus="this.className='input_on';this.οnmοuseοut=''"   
  146.         onblur="this.className='input_off';this.οnmοuseοut=function(){this.className='input_out'};"  
  147.         onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" />  
  148.     <input type="hidden" id="valueResult" name="valueResult" value="" />  
  149.     <br />  
  150.     <div id="suggestResult" style="display: none">  
  151.     </div>  
  152.     <br/>  
  153.     <input id="button1" type="button" value="提交" onclick="showResult();" />  
  154.     </form>  
  155. </body>  
  156. </html>  

[csharp]  view plain  copy
 print ?
  1. <%@ WebHandler Language="C#" Class="SearchResult" %>  
  2.   
  3. using System;  
  4. using System.Web;  
  5. using System.Data;  
  6.   
  7. public class SearchResult : IHttpHandler {  
  8.       
  9.     public void ProcessRequest (HttpContext context) {  
  10.         object QueryWord=context.Request.QueryString["searchText"];  
  11.         if (QueryWord != null)  
  12.         {  
  13.             if (QueryWord.ToString().Trim().Length > 0)  
  14.             {  
  15.                 DataTable dt = getDB();  
  16.                 string returnText = "";  
  17.                 if (dt != null && dt.Rows.Count > 0)  
  18.                 {  
  19.                     DataRow[] dr = dt.Select(" name like '%" + QueryWord .ToString()+ "%' ");  
  20.                     if (dr.Length > 0)   
  21.                     {  
  22.                         for (int i = 0; i < dr.Length; i++)  
  23.                         {  
  24.                             //可设置返回多字符串  
  25.                             returnText += dr[i]["id"].ToString() + "@" + dr[i]["name"].ToString() + "\n";   
  26.                         }  
  27.                     }  
  28.                 }  
  29.                 context.Response.Write(returnText);  
  30.                 context.Response.End();  
  31.             }  
  32.         }          
  33.     }  
  34.    
  35.     public bool IsReusable {  
  36.         get {  
  37.             return false;  
  38.         }  
  39.     }  
  40.   
  41.   
  42.     /// <summary>  
  43.     /// 获取数据源的方法  
  44.     /// </summary>  
  45.     /// <returns>数据源</returns>  
  46.     private DataTable getDB()  
  47.     {  
  48.         DataTable dt = new DataTable();  
  49.         dt.Columns.Add("id");  
  50.         dt.Columns.Add("name");  
  51.         dt.Columns.Add("age");  
  52.         dt.Rows.Add(new object[] { "000001", "张三", "26" });  
  53.         dt.Rows.Add(new object[] { "000002", "张晓", "26" });  
  54.         dt.Rows.Add(new object[] { "000003", "张岚", "27" });  
  55.         dt.Rows.Add(new object[] { "000004", "李四", "25" });  
  56.         dt.Rows.Add(new object[] { "000005", "李星", "27" });  
  57.         return dt;  
  58.     }  
  59.   
  60. }
my98800
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax+ssh模拟百度模糊查询 下拉框值改变时
11-09
1 模拟百度搜索引擎 实现模糊查询 2 选择下拉框的选项时 动态显示相应的表格信息内容
仿Google页面效果完美版源码（HTML+JavaScript）
03-13
完美的仿Google页面效果，方便用户体验，还美观。用HTML+JavaScript实现，很容易调用。跟大家共享一下。
仿Google搜索框
wzp144650的专栏
03-30 629
无标题页 <!-- .myColor { background-color:#3366CC; color:White; } --> .myColor { background-color:#3366CC; color:White; }
仿 google 搜索框功能的实现关键代码
我想留下些痕迹来证明,我曾经真实的存在着!
11-05 812
后台函数public void googleSearch()        {            string con=Request.QueryString["content"].ToString();            StringBuilder st=new StringBuilder();            string sqlTxt="sele
JS实现输入框类似百度搜索的智能提示功能，实现提示列表向上弹出
凉茶冰
03-13 3248
原文链接，请点击我 原文的博主写的非常详细，而且对js和css还做了自己的调整，实现的效果也非常好。给的例子也非常全，包括静态的提示和通过ajax方式的提示。   我引入到项目中之后，确认可用，但是提示的内容是下拉的出来的，类似百度搜索。但是我实际的需求是输入框在页面的最底部，这就要求提示的内容是向上推出来的。 然后查看插件的源码，发现他的在控制下来列表是通过找到页面的body，然后通过相...
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
12-09
firefox 和 ie 的浏览器各自实现了input历史记录的功能，可以简化输入时的麻烦，但是，有时候弹出的下拉框会挡住页面显示内容，而且在某些情况下也不需要对input框进行记录，如号码查询的input框，用户不会对同一个...
仿google搜索提示 SuggestFramework的使用
12-03
【Suggest Framework】是一个模仿Google搜索提示功能的小型JavaScript框架，它允许开发者在自己的网站上实现文本框的输入提示效果，提升用户搜索体验和效率。该框架具备良好的浏览器兼容性，支持Internet Explorer 5...
JSuggest--模仿google,百度下拉提示框输入框 Ajax 兼容火狐（HOT）
06-02
JSuggest是一个JavaScript库，专门用于模仿Google和百度搜索框的下拉提示功能。通过Ajax技术，它能够实时地从服务器获取数据，动态显示与用户输入匹配的建议列表，从而帮助用户更快地找到他们想要的信息。这个功能在...
一个像百度百度搜索框,在用户输入时追加..
08-13
标题中的“一个像百度搜索框,在用户输入时追加..”指的是实现一个与百度搜索框类似的功能，即在用户输入关键词时，自动提供相关的搜索建议。这种功能通常基于JavaScript库，如jQuery，来实现动态加载和显示推荐内容...
基于ASP的飞飞模仿google下拉提示框输入框 v1.7 Ajax 兼容火狐.zip
07-13
Google的下拉提示框是搜索引擎中常见的一种功能，当用户在搜索框输入关键词时，搜索引擎会根据输入内容提供相关的搜索建议。这种功能提高了用户输入效率，减少了错误搜索的可能性。飞飞模仿的这个项目就是尝试在ASP...
仿google搜索效果
03-21
NULL 博文链接：https://15198297726-163-com.iteye.com/blog/986393
实现输入内容提示的功能（仿google_百度输入框提示）
04-18
实现输入内容提示的功能（仿google_百度输入框提示） 具体可参见博文： http://blog.csdn.net/longteng1116/article/details/8816872#reply
JS实现输入框类似百度搜索的智能提示效果
hangGe0111的博客
10-18 2070
转：https://blog.csdn.net/yedajiang44/article/details/72758269 1.html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &...
实现百度搜索输入框效果
赵静的专栏
08-30 2458
1.添加AjaxControlToolkit.dll（本人博客资源中下载） 2. 在页面中引用 3.页面中具体代码             4.添加AutoCompleteService.asmx 文件      AutoCompleteService.asmx 文件中代码 public class AutoCompleteService : System.Web.Servic
web开发自动完成事件
maoxiao_jsd的专栏
10-06 814
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">        搜索词自动完成    #search{  text-align: center;  position:relative;  }  .autocomplete{  border: 1px solid #9ACCFB;  background-color: w
Jquery 仿百度搜索引擎自动完成功能
CEJ-XuXue(盐井)
12-22 3276
源代码如下所示： &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;自动完成例子&lt;/title&gt; &lt;script type="text/javascript" s
Android基础教程（八）之仿百度谷歌搜索自动提示框-----AutoCompleteTextView的应用...
weixin_34250709的博客
01-06 82
2019独角兽企业重金招聘Python工程师标准>>> ...
分包合同计量单.docx
最新发布
07-13
分包合同计量单.docx
使用tkinter combobox实现百度搜索框
04-28
root.title("百度搜索框") # 创建一个下拉框 options = ["百度一下", "谷歌搜索", "必应搜索"] search_engine = tk.StringVar() search_engine_cb = tk.ttk.Combobox(root, textvariable=search_engine, values=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值