js百度搜索框功能模拟

最新推荐文章于 2022-03-30 19:56:18 发布

原创最新推荐文章于 2022-03-30 19:56:18 发布 · 534 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#百度 #css #html

这篇博客展示了如何使用JavaScript实现一个简单的搜索框，当用户输入时，根据预定义的关键字列表提供实时联想搜索。代码包括HTML布局、CSS样式、JavaScript函数，实现了输入框的文本监听、匹配关键字高亮显示以及鼠标悬停改变背景色等功能。

这里我们就废话不多说了，直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#box {
				margin: 200px;
			}
			
			#txt {
				height: 30px;
				width: 320px;
			}
			
			#btn {
				width: 80px;
				height: 30px;
				border: none;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<input type="text" id="txt" value="" />
			<input type="button" id="btn" value="搜索" />
		</div>
	</body>
	<script type="text/javascript">
		//  调用my$()方法，返回该id名的元素
		function my$(id) {
			return document.getElementById(id);
		}
		//	给元素添加内容    ---兼容处理版本
		function setInnerText(element, text) {
			if(typeof element.textContent == 'undefined') {
				element.innerText = text;
			} else {
				element.textContent = text;
			}
		}
	</script>
	<script type="text/javascript">
		//	定义关键字
		var keyword = ['一只小猫', '两只小猫', '一只小狗', '三只小狗', '一只羊', '两只羊', '三只羊', '百度一下', '百度两下'];
		my$('txt').onkeyup = function() {
			if(my$('dv')) { //  每当键盘抬起时，判断该元素是否存在，如果存在则删除这个元素
				my$("box").removeChild(my$('dv'));
			}
			var arrs = []; //定义空数组，存放满足条件的数组元素
			for(var i = 0; i < keyword.length; i++) {
				if(keyword[i].indexOf(this.value) == 0) {
					arrs.push(keyword[i]);
				}
			}
			// 下面这个this指向的是my$('txt')
			if(this.value == '' || arrs.length == 0) {
				if(my$('dv')) {
					my$("box").removeChild(my$('dv'));
				}
				return;
			}
			//创建存放结果的div，并设置样式，最后加入我们内容的下面
			var cdv = document.createElement('div');
			cdv.id = 'dv';
			cdv.style.width = '320px';
			cdv.style.border = '1px solid green';
			my$("box").appendChild(cdv);
			//	遍历结果
			for(var i = 0; i < arrs.length; i++) {
				var pds = document.createElement('p');
				cdv.appendChild(pds);
				setInnerText(pds, arrs[i]);
				//	鼠标悬停换颜色
				pds.onmouseover = function() {
					this.style.background = 'yellow';
				}
				pds.onmouseout = function() {
					this.style.background = '';
				}
			}
		}
	</script>
</html>

好啦，搜索框简单的功能就做完啦，本篇文章到这就结束咯，拜拜啦~