您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
JS实现仿google、百度搜索框输入信息智能提示的实现方法
作者：佚名 责任编辑：admin 更新时间：2022-06-22
这篇文章主要介绍了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"); d- 上一个程序编程： Jquery遍历Json数据的方法
- 下一个程序编程： JS中完美兼容各大浏览器的scrolltop方法
