这里我们就废话不多说了,直接上代码
<!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>
好啦,搜索框简单的功能就做完啦,本篇文章到这就结束咯,拜拜啦~