您的位置：首页 > Web前端 > JavaScript

js小例子（简单模糊匹配输入信息）

2015-11-04 20:49 886 查看

该例子实现的是用户输入信息或者字母时可以搜索出来，鼠标点击选择

<!DOCTYPE html>
<html>
<style>
p{
width:200px;
height:2em;
padding:0;
margin:0;
background:#D4D4D4;
display:none;
border-bottom:1px solid black;
}
p:hover{
background:#F7F7F7;
}
div{
height:100px;
width:200px;
overflow-x:hidden;
}
</style>
<body >
<input type="text" id="input" onkeyup="query()" >
<div >
<p onclick="select(this)">js</p>
<p onclick="select(this)">wes</p>
<p onclick="select(this)">che</p>
<p onclick="select(this)">women</p>
<p onclick="select(this)">jswo</p>
</div>
<script>
function select(obj){
var text = document.getElementById("input");
text.value = obj.innerHTML;   //实现选择
var p = document.getElementsByTagName("p");
for(var i=0;i<p.length;i++){
p[i].style.display="none";  //选择完以后隐藏
}
}
function query(){
var p = document.getElementsByTagName("p");
var text = document.getElementById("input");
for(var i=0;i<p.length;i++){
p[i].style.display="none";
if(p[i].innerHTML.match(text.value)){ //匹配输入信息
p[i].style.display="block";
}
}
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航