搜索栏联想词提示

在我们需要游览一些网站的时候，我们经常需要使用搜索引擎来进行搜索，无论是百度谷歌还是搜狐等，我们都需要在搜索栏中输入相关的搜索词，当我们点击进行输入的时候，下面会给出许许多多的提示词，程序自动联想你可能输入的内容，所以往往我们只输入了一个词就看到了我们想要的题目直接点击进行搜索就行了。

那麽我们如何来实现如上所说的联想词提示的搜索效果的呢？？？

首先我们来看一下效果
在这里插入图片描述

如上图所示效果非常完美，那麽程序到底如何呢？

程序展示

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 = 0
			for (; 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;
	}
}

了解更多关注我哟！！！

一页北城’

发布了236 篇原创文章 · 获赞 87 · 访问量 7210

私信关注

搜索栏联想词提示

程序展示

猜你喜欢