Code666 (代码贴、代码片段)

[JavaScript] JS 仿google、百度搜索框输入信息智能提示的实现 →→→→→进入此内容的聊天室

来自 , 2019-05-24, 写在 JavaScript, 查看 106 次.
URL http://www.code666.cn/view/fc1f073f
  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 onmouseover=\"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.onmouseout=''"
  146.         onblur="this.className='input_off';this.onmouseout=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>
  157.  
  158.  
  159.  
  160. //javascript/5855

回复 "JS 仿google、百度搜索框输入信息智能提示的实现"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666