<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>inpyt</title>
</head>
<body>
<style type="text/css">
body, div, dl, dt, dd, ul, ol, li, p, b, span, pre, form, label, input {
margin: 0;
padding: 0;
list-style: none;
}
body {
font-family: "Microsoft YaHei";
font-size: 12px;
background: #fff;
color: #333;
}
body, td, th {
font-size: 12px;
}
img {
border: none;
}
a {
text-decoration: none;
color: #000;
}
.secr{ width: 500px; height: auto; margin: 50px auto;}
.secr .sou{width: 498px; height: 40px;font-size: 16px; text-indent: 10px;}
.secr ul{float: left; width: 500px; height: auto; border:1px solid #ccc;
border-top: none;
display:none;
}
.secr ul li .s55{
float: left; width: 498px;
line-height: 30px;
font-size: 16px;
text-indent: 10px;
border:none;}
.secr ul li .s55:hover{
background: red;
border:none;
color: #fff;
cursor: pointer;
}
</style>
<div class="secr" id="secr">
<input type="text" value="" class="sou">
<ul>
<li><input type="text" value="11111111111111111111" class="s55"></li>
<li><input type="text" value="22222222222222222222" class="s55"></li>
<li><input type="text" value="33333333333333333333" class="s55"></li>
<li><input type="text" value="44444444444444444444" class="s55"></li>
</ul>
</div>
<script type="text/javascript" src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(‘.secr .sou‘).focus(function(){
$(this).parents().find(‘ul‘).fadeIn();
})
$(‘.secr .sou‘).blur(function(){
$(this).parents().find(‘ul‘).fadeOut();
})
$(‘.secr ul .s55‘).click(function(){
var ss = $(‘.sou‘).val($(this).val());
//alert(ss.val())
})
})
</script>
</body>
</html>
时间： 2024-10-06 17:53:02