<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery简单的检索框-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
???????* {
margin:0;
padding:0;
}
ul li {
list-style:none;
}
a {
text-decoration:none;
}
.box {
width:600px;
}
.box1 {
width:300px;
height:auto;
margin:30px 70px;
float:left;
position:relative;
}
.box1 .inputCont {
width:200px;
height:36px;
line-height:36px;
position:absolute;
top:0;
left:0;
}
.box1 #dynamicUl {
width:200px;
height:auto;
border:1px solid yellow;
position:absolute;
left:0;
top:40px;
}
.box1 #dynamicUl li {
width:200px;
height:36px;
line-height:36px;
border-bottom:1px solid #ccc;
}
.box2 {
width:200px;
height:auto;
float:right;
margin-top:-30px;
}
.box2 #data {
width:200px;
height:auto;
}
</style>
</head>
<body>
<div class="box">
???<div class="box1">
???????<input type="text" placeholder="请输入手机号" class="inputCont">
???????<ul id="dynamicUl">
???????</ul>
???</div>
???<div class="box2">
???????<h3>这个相当于数据库</h3>
???????<ul id="data">
???????????<li>1</li>
???????????<li>22</li>
???????????<li>123</li>
???????????<li>13571</li>
???????????<li>111</li>
???????</ul>
???</div>
</div><script>
$(function() {
???var arr = [];
???$(‘#data‘).children().each(function() {
???????var liText = $(this).text();
???????arr.push(liText);
???});
???$(‘.inputCont‘).on(‘keyup‘, function() {
???????$(‘#dynamicUl‘).find("li").remove();
???????$(‘#dynamicUl‘).show();
???????var inputCont = $(‘.inputCont‘).val();
???????for (var i = 0; i < arr.length; i++) {
???????????if ((arr[i].indexOf(inputCont)) != -1) {
???????????????$(‘#dynamicUl‘).append($(‘<li onclick="removeUl(this)">‘ + arr[i] + ‘</li>‘));
???????????}
???????}
???})
???$(‘#dynamicUl‘).on(‘click‘, ‘li‘, function() {
???????$(‘.inputCont‘).val($(this).text());
???})
???removeUl = function() {
???????$(‘#dynamicUl‘).hide();
???}
})</script>
</body>
</html>
jquery 简单检索框
原文地址：http://www.cnblogs.com/dqn--/p/7497977.html