带提示的搜索框

最新推荐文章于 2024-08-23 14:03:47 发布

zhaoyp1985

最新推荐文章于 2024-08-23 14:03:47 发布

阅读量288

点赞数

分类专栏： web前端文章标签： function input autocomplete class search xhtml

本文链接：https://blog.csdn.net/zhaoyp1985/article/details/6789955

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>搜索框</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
.tip{width:252px;height:auto;border:1px solid #aebeee;display:none;margin-top:-3px;}
.tip ul{margin-top:5px;list-style-type:none;padding-left:2px;line-height:20px;font-size:13px;_margin-left:0px;}
.tip ul li a{cursor:pointer;display:block;padding-left:8px;}
.h1{background-color:#efefff;}
.searchTxt{height:22px;width:250px;font-size:20px;}
.searchBtn{width:70px;height:28px;}
</style>
<script>
function dcs(s, i)
{
    if (i && document.getElementById(i)) {
        document.getElementById(i).parentNode.removeChild(document.getElementById(i));
    }
    var js = document.body.appendChild(document.createElement("SCRIPT"));
    js.src = s;
    if (i) {
        js.id = i;
    }
}
function changeTheme(t,logo)
{
   document.title = t;
}
function showtip(event)
{
   var event =   window.event || event;
    if(event.keyCode != 38 && event.keyCode != 40){
    val = $("#search_input").val();
        dcs('http://www.google.cn/complete/search?hl=zh-CN&q=' + encodeURIComponent(val) + '&_=' + Math.random(), 'gsg');
    }

    if($(".tip").css("display") != 'none')
       if(event.keyCode == 38){
           var n = getselsect();
           if(n == 1 || n==0){
               $("#tip_ul li:first-child").removeClass("h1");
               $("#tip_ul li:last-child").addClass("h1");
               $("#search_input").val($("ul li:last-child > a").html());
           } else {
               $("#tip_ul li:nth-child("+n+")").removeClass("h1");
               $("#tip_ul li:nth-child("+(n-1)+")").addClass("h1");
               $("#search_input").val($("#tip_ul li:nth-child("+(n-1)+") > a").html());
           }
       }
    if(event.keyCode == 40){
        var n = getselsect();
        if(n == $("#tip_ul li").length || n==0){
            $("#tip_ul li:last-child").removeClass("h1");
            $("#tip_ul li:first-child").addClass("h1");
            $("#search_input").val($("ul li:first-child > a").html());
        } else {
            $("#tip_ul li:nth-child("+n+")").removeClass("h1");
            $("#tip_ul li:nth-child("+(n+1)+")").addClass("h1");
            $("#search_input").val($("#tip_ul li:nth-child("+(n+1)+") > a").html());
        }
    }
}
window.google = {};
window.google.ac={};
window.google.ac.h = function(a){
    if(a[1] && a[1].length>1){
       var str = '';
        for(var i=0;i<a[1].length;i++){
           str += '<li><a>'+ a[1][i][0] +'</a></li>';
        }
        $("#tip_ul").html(str);
    };
    $(".tip li").hover(
       function () {
                    $(this).addClass("h1");
           },
       function () {
                      $(this).removeClass("h1");
           }
    );
    if(str){
        $(".tip").show();
        $("#tip_ul > li > a").click(function(){
            $("#search_input").val($(this).html());
            $("#search_form").submit();
            setTimeout("count_key()",'100');
        });
    }

}
function count_key()
{
   setTimeout("$('.tip').hide()",'1000');

}
$(function(){
   $("body").click(
           function(){
               $("#kwh").hide();
           });
   });
function getselsect()
{
   var lis = document.getElementsByTagName("li");
   for(var j=0;j<lis.length;j++){
       if(lis[j].className == 'h1'){
           return j+1;
       }
   }
   return 0;
}
</script>
</head>
<body id="b1">
<form id="search_form" action="http://www.baidu.com/s" target="_blank">
<div class="search">
<input type="text" id="search_input" class="searchTxt" name="wd" autocomplete="off" οnkeydοwn="showtip(event)" >
<input type="submit" class="searchBtn" value="搜索" οnclick="count_key()" >
</div>
<div class="tip" id="kwh">
<ul id="tip_ul">
</ul>
</div>
</form>
</body>
</html>

zhaoyp1985

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
带提示的搜索框

搜索框.tip{width:252px;height:auto;border:1px solid #aebeee;display:none;margin-top:-3px;}.tip ul{margin-top:5px;list-style-type:none;p
复制链接

扫一扫