搜索栏联想词提示
在我們需要游覽一些網站的時候，我們經常需要使用搜索引擎來進行搜索，無論是百度谷歌還是搜狐等，我們都需要在搜索欄中輸入相關的搜索詞，當我們點擊進行輸入的時候，下面會給出許許多多的提示詞，程序自動聯想你可能輸入的內容，所以往往我們只輸入了一個詞就看到了我們想要的題目直接點擊進行搜索就行了。
那麼我們如何來實現如上所說的聯想詞提示的搜索效果的呢？？？
首先我們來看一下效果
如上圖所示效果非常完美，那麼程序到底如何呢？
程序展示
html
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>相似查詢</title><link rel="stylesheet" type="text/css" href="css/style.css" /></head><body><script src="/demos/googlegg.js"></script><div id="out"><div id="ser_box"><input type="search" id="ipt" /><span><input id="su" value="搜索一下" class="bg s_btn" type="submit"></span></div><div id="bot_box"><ul id="oul"></ul></div></div><script src="js/style.js" type="text/javascript" charset="utf-8"></script></body> </html>style.css
* {margin: 0;padding: 0; }#out {width: 500px;height: 140px;margin: 300px auto; }#ser_box {width: 500px;height: 32px;border: 1px solid blue;text-align: center; }#ipt {width: 480px;height: 26px;margin-top: 2px;border: 0;outline: 0;font-family: "微軟雅黑";font-size: 16px; }#bot_box {width: 500px;border: 1px solid #4C9ED9;border-top: none;display: none; }#bot_box ul li {list-style: none;line-height: 25px;padding-left: 10px; }#bot_box ul li:hover {background: #BCBCBC; }.s_btn {position: relative;left: 300px;top: -31px;width: 100px;height: 36px;color: #fff;font-size: 15px;letter-spacing: 1px;background: #3385ff;border-bottom: 1px solid #2d78f4;outline: medium; }.sel {background: #BCBCBC; }style.js
function $(id) {return document.getElementById(id); }var ipt = $("ipt"); var ser = $("ser_box"); var bot = $("bot_box"); var oul = $("oul");ipt.oninput = function() {var ss = ipt.value;var url = "http://suggestion.baidu.com/su?cb=queryList&wd=" + ss;addScript(url); }ipt.onfocus = function() {var ss = ipt.value;var url = "http://suggestion.baidu.com/su?cb=queryList&wd=" + ss;addScript(url);}function queryList(data) {ss = document.getElementsByTagName("script")[0];document.body.removeChild(ss)var arr = data.s;oul.innerHTML = "";if (arr.length == 0) {bot.style.display = "none";} else {bot.style.display = "block";}for (var i = 0; i < arr.length; i++) {li = document.createElement("li");li.innerHTML = arr[i];li.onclick = function() {oul.innerHTML = "";ipt.value = this.innerHTML;bot.style.display = "none";}oul.appendChild(li);} }function addScript(url) {var s = document.createElement("script");s.src = url;s.type = "text/javascript";document.body.appendChild(s); }/*取li*/lis = document.getElementsByTagName("li");/*按鍵*/ var i = 0;document.onkeydown = function(ev) {if (bot.style.display == "block") {if (ev.keyCode == 40) {for (var j = 0; j < lis.length; j++) {if (lis[j].className == "sel") {lis[j].className = "";}}if (i < lis.length) {lis[i].className = "sel";i++;if (i == lis.length) {i = 0;}}}if (ev.keyCode == 38) {m = 0for (; m < lis.length; m++) {if (lis[m].className == "sel") {lis[m].className = "";break;}}i = m;if (m > 0) {lis[m - 1].className = "sel";} else {lis[lis.length - 1].className = "sel";}}if (ev.keyCode == 13) {for (var n = 0; n < lis.length; n++) {if (lis[n].className == "sel") {ipt.value = lis[n].innerHTML;}}bot.style.display = "none";}} else {i = 0;m = 0;} }了解更多關注我喲！！！
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
- 上一篇： 使用foreach循环遍历Collect
- 下一篇： java用内部类实现多重继承