<style>
ul li{
list-style: none;
}
.all {
width: 600px;
}
.box {
width:300px;
height:auto;
margin:30px 70px;
float:left;
position:relative;
}
.box .inputContent {
width:200px;
height:36px;
line-height:36px;
position:absolute;
top:0;
left:0;
}
.box #dynamicUl {
width:162px;
height:auto;
border:1px solid yellow;
position:absolute;
left:0;
top:25px;
}
.box #dynamicUl li {
width:200px;
height:36px;
line-height:36px;
border-bottom:1px solid #ccc;
}
.box1 {
width:200px;
height:auto;
float:right;
margin-top:-30px;
}
</style>
</head>
<body>
<div class="all">
<div class="box">
<input type="text" placeholder="请输入手机号" class="inputContent" onkeyup="this.value=this.value.replace(/\D/,'')" ">
<ul id="dynamicUl">
</ul>
</div>
<div class="box1">
<h3>这是一个数据库</h3>
<ul id="data">
<li>1</li>
<li>22</li>
<li>123</li>
<li>13571</li>
<li>111</li>
<li>18873245</li>
</ul>
</div>
</div>
<script>
$(function(){
var arr=[];
$("#data").children().each(function(){
var texts=$(this).text();
arr.push(texts);
})
$(".inputContent").keydown(function(){
$(".inputContent:text").css("background-color","#C8DDFF");
})
$(".inputContent").on('keyup',function(){
$("#dynamicUl").find("li").remove();
$("#dynamicUl").show();
var inputCont = $('.inputContent').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() {
$('.inputContent').val($(this).text());
})
removeUl = function() {
$('#dynamicUl').hide();
}
})
</script>
ul li{
list-style: none;
}
.all {
width: 600px;
}
.box {
width:300px;
height:auto;
margin:30px 70px;
float:left;
position:relative;
}
.box .inputContent {
width:200px;
height:36px;
line-height:36px;
position:absolute;
top:0;
left:0;
}
.box #dynamicUl {
width:162px;
height:auto;
border:1px solid yellow;
position:absolute;
left:0;
top:25px;
}
.box #dynamicUl li {
width:200px;
height:36px;
line-height:36px;
border-bottom:1px solid #ccc;
}
.box1 {
width:200px;
height:auto;
float:right;
margin-top:-30px;
}
</style>
</head>
<body>
<div class="all">
<div class="box">
<input type="text" placeholder="请输入手机号" class="inputContent" onkeyup="this.value=this.value.replace(/\D/,'')" ">
<ul id="dynamicUl">
</ul>
</div>
<div class="box1">
<h3>这是一个数据库</h3>
<ul id="data">
<li>1</li>
<li>22</li>
<li>123</li>
<li>13571</li>
<li>111</li>
<li>18873245</li>
</ul>
</div>
</div>
<script>
$(function(){
var arr=[];
$("#data").children().each(function(){
var texts=$(this).text();
arr.push(texts);
})
$(".inputContent").keydown(function(){
$(".inputContent:text").css("background-color","#C8DDFF");
})
$(".inputContent").on('keyup',function(){
$("#dynamicUl").find("li").remove();
$("#dynamicUl").show();
var inputCont = $('.inputContent').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() {
$('.inputContent').val($(this).text());
})
removeUl = function() {
$('#dynamicUl').hide();
}
})
</script>
扫一扫
1546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
