百度一下

最新推荐文章于 2024-06-19 21:45:00 发布

nice_coding

最新推荐文章于 2024-06-19 21:45:00 发布

阅读量501

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/yaomqiao/article/details/47453457

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>so.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
//光标定位
$("#keywords").focus();
$("#keywords").keyup(function(){
if($(this).val()){
$(".message_li").show()
}else{
$(".message_li").hide();
}
$(".message_li>li").mouseover(function(){
//向当前元素添加class
$(this).addClass("soclass");
})

$(".message_li>li").mouseout(function(){
//向当前元素删除样式
$(this).removeClass("soclass");

})

})

$("#keywords").blur(function(){
//input 框失去焦点隐藏
$(".message_li").hide();
})

//监听键盘...
$(window).keydown(function(event){
//键盘上面每个按钮对应的它都是一个数字,上下键对应的数字是多少..
switch(event.keyCode) {
case 38:{
//向上的键我们应该干的事情

break;
}
case 40:{
//向下的键应该做的事情..

if($(".soclass").length ==0 ){
$(".message_li>li:first").addClass("soclass");
$("#keywords").val($(".message_li>li:first").text());
}else{
if($(".soclass").next().length==0){
$(".message_li>li:last").removeClass("soclass");
$(".message_li>li:first").addClass("soclass");
$("#keywords").val($(".message_li>li:first").text());

}else{
$(".soclass").removeClass("soclass").next().addClass("soclass");
$("#keywords").val($(".soclass").text());
}

}
break;
}
}
});


})

</script>

</head>
<style type="text/css">
.soclass{
background:red;
}

#keywords{
width:500px;
font-size:28px;
}
#searchbutton{
font-size:26px;
}
.message_li{
width:502px;
border:1px solid #999999;
margin-left:-140px;
margin-top:-2px;
display:none;
}
.message_li li{
list-style:none;
padding:5px;
}
</style>
<body>
<div class="meassage_area" align="center">
<input type="text" id="keywords">
<input type="button" value="百度一下" id="searchbutton">
<div class="message_li" align="left">
<li>中国好声音</li>
<li>中国好男人</li>
<li>中国好嫂子</li>
<li>中国好媳妇</li>
<li>中国丈母娘</li>
<li>中国老太太</li>
<li>中国好老师</li>
<li>中国加多宝</li>
<li>中国凉茶</li>
</div>
</div>
</body>
</html>