沧州市网站制作,搜索引擎优化的重要性,泰州网站制作推广,深圳网站建设及优化在我们需要游览一些网站的时候#xff0c;我们经常需要使用搜索引擎来进行搜索#xff0c;无论是百度谷歌还是搜狐等#xff0c;我们都需要在搜索栏中输入相关的搜索词#xff0c;当我们点击进行输入的时候#xff0c;下面会给出许许多多的提示词#xff0c;程序自动联想…在我们需要游览一些网站的时候我们经常需要使用搜索引擎来进行搜索无论是百度谷歌还是搜狐等我们都需要在搜索栏中输入相关的搜索词当我们点击进行输入的时候下面会给出许许多多的提示词程序自动联想你可能输入的内容所以往往我们只输入了一个词就看到了我们想要的题目直接点击进行搜索就行了。
那麽我们如何来实现如上所说的联想词提示的搜索效果的呢
首先我们来看一下效果
如上图所示效果非常完美那麽程序到底如何呢
程序展示
html
!DOCTYPE html
htmlheadmeta charsetutf-8 /title相似查询/titlelink relstylesheet typetext/css hrefcss/style.css //headbodyscript src/demos/googlegg.js/scriptdiv idoutdiv idser_boxinput typesearch idipt /spaninput idsu value搜索一下 classbg s_btn typesubmit/span/divdiv idbot_boxul idoul/ul/div/divscript srcjs/style.js typetext/javascript charsetutf-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?cbqueryListwd ss;addScript(url);
}ipt.onfocus function() {var ss ipt.value;var url http://suggestion.baidu.com/su?cbqueryListwd 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;}
}
了解更多关注我哟
