程序博客网 > 维护数据库培训班

检索框的实现

来源：互联网发布：维护数据库培训班编辑：程序博客网时间：2024/06/18 08:26

<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>

阅读全文

0 0

维护数据库培训班

维护数据库培训班

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子金灶电水壶潮阳金灶金灶烧水壶金灶kamjove 金灶茶盘金灶旗舰店 kamjve金灶金灶养生壶金灶开水壶金灶r180a 金灶电热壶金灶维修点金灶t90 金灶牌电热水壶金灶电水壶价格金灶电水壶怎么样金灶茶具维修点金灶电茶壶通电但不加热金灶玻璃茶杯金灶茶具价格及图片金灶茶具维修点明细金灶电热水壶金灶茶具生产厂家金灶维修电话金灶飘逸杯怎么样金灶茶具价格金灶飘逸杯如何清洗格莱德电水壶龙力热水壶隔热层 304不锈钢电水壶 strix 康雅智能电热水壶金灶镇安博尔电热水壶小熊电热水壶荣事达电热水壶小鸭电热水壶电水壶配件容声电水壶