百度下拉搜索

最新推荐文章于 2021-12-20 10:14:39 发布

weixin_30824479

最新推荐文章于 2021-12-20 10:14:39 发布

阅读量121

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gyz418/p/5542905.html

版权

百度下拉搜索

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
        $(function () {
            var search=$("#search");
            var ul=$("ul");
            var oLis=$("ul li");
            var index=0;
            search.focus(function () {
                ul.slideDown();
                oLis.eq(0).addClass("active");
                oLis.click(function () {
                    search.val($(this).text());
                });
                oLis.hover(function () {
                    $(this).addClass("active").siblings().removeClass("active");
                }, function () {
                    $(this).removeClass("active");
                });
            });
            search.blur(function () {
                ul.slideUp();
            });
            search.keydown(function (event) {
                if(event.which== 38){     // 向上
                    if(index==0){
                        index=oLis.length-1;
                    }else{
                        index--;
                    }
                }
                else if(event.which==40){  // 向下
                    if(index==oLis.length-1){
                        index=0;
                    }else{
                        index++;
                    }
                }else if(event.which == 13){ // 回车
                    search.val($("ul li").eq(index).text());
                    ul.slideUp();
                    index=0;
                }
                oLis.eq(index).addClass("active").siblings().removeClass("active");
            });
        });
    </script>
</head>
<body>
<style>
    ul{width:170px;}
    ul,li{margin:0;padding:0;}
    li{list-style:none; line-height: 30px; height: 30px;}
    li:hover{cursor:pointer;}
    .active{background-color: #0099FF;}
</style>
<input type="text" id="search">
<ul style="display: none;">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>

</body>
</html>

网络版下拉搜索

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
    <style>
        *{
            margin:0;
            padding:0;
        }
        .login{
            width:400px;
            margin:0 auto;
            background:#EBEBEB;
            position:relative;
        }
        input{
            width:230px;
            height:28px;
            margin:10px 0;
            line-height:28px;
        }
        .login .on_changes{
            width:232px;
            position:absolute;
            top:40px;
            list-style:none;
            background:#FFF;
            border:1px solid #000;
            display:none;
            padding:10px;
        }
        .login .on_changes li{
            margin:8px;
            padding:4px;
        }
        .login .on_changes li.active{
            background:#CEE7FF;
        }

    </style>
    <script type="text/javascript" src="http://ku.shouce.ren/libs/jquery/1/jquery1.6.1.min.js"></script>
    <script>
        // JavaScript Document
        (function($){
                    $.fn.extend({
                                "changeTips":function(value){
                                    value = $.extend({
                                                divTip:""
                                            }
                                            ,value)
                                    var $this = $(this);
                                    var indexLi = 0;
                                    //点击document隐藏下拉层
                                    $(document).click(function(event){
                                                if($(event.target).attr("class") == value.divTip || $(event.target).is("li")){
                                                    var liVal = $(event.target).text();
                                                    $this.val(liVal);
                                                    blus();
                                                }
                                                else{
                                                    blus();
                                                }
                                            }
                                    )
                                    //隐藏下拉层
                                    function blus(){
                                        $(value.divTip).hide();
                                    }
                                    //键盘上下执行的函数
                                    function keychang(up){
                                        if(up == "up"){
                                            if(indexLi == 1){
                                                indexLi = $(value.divTip).children().length-1;
                                            }
                                            else{
                                                indexLi--;
                                            }
                                        }
                                        else{
                                            if(indexLi ==  $(value.divTip).children().length-1){
                                                indexLi = 1;
                                            }
                                            else{
                                                indexLi++;
                                            }
                                        }
                                        $(value.divTip).children().eq(indexLi).addClass("active").siblings().removeClass();
                                    }
                                    //值发生改变时
                                    function valChange(){
                                        var tex = $this.val();
                                        //输入框的值
                                        var fronts = "";
                                        //存放含有“@”之前的字符串
                                        var af = /@/;
                                        var regMail = new RegExp(tex.substring(tex.indexOf("@")));
                                        //有“@”之后的字符串,注意正则字面量方法，是不能用变量的。所以这里用的是new方式。
                                        //让提示层显示，并对里面的LI遍历
                                        if($this.val()==""){
                                            blus();
                                        }
                                        else{
                                            $(value.divTip).
                                                    show().
                                                    children().
                                                    each(function(index) {
                                                        var valAttr = $(this).attr("email");
                                                        if(index==1){
                                                            $(this).text(tex).addClass("active").siblings().removeClass();
                                                        }
                                                        //索引值大于1的LI元素进处处理
                                                        if(index>1){
                                                            //当输入的值有“@”的时候
                                                            if(af.test(tex)){
                                                                //如果含有“@”就截取输入框这个符号之前的字符串
                                                                fronts = tex.substring(tex.indexOf("@"),0);
                                                                $(this).text(fronts+valAttr);
                                                                //判断输入的值“@”之后的值，是否含有和LI的email属性
                                                                if(regMail.test($(this).attr("email"))){
                                                                    $(this).show();
                                                                }
                                                                else{
                                                                    if(index>1){
                                                                        $(this).hide();
                                                                    }
                                                                }
                                                            }
                                                            //当输入的值没有“@”的时候
                                                            else{
                                                                $(this).text(tex+valAttr);
                                                            }
                                                        }
                                                    }
                                            )
                                        }
                                    }
                                    //输入框值发生改变的时候执行函数，这里的事件用判断处理浏览器兼容性;
                                    if($.browser.msie){
                                        $(this).bind("propertychange",function(){
                                                    valChange();
                                                }
                                        )
                                    }
                                    else{
                                        $(this).bind("input",function(){
                                                    valChange();
                                                }
                                        )
                                    }
                                    //鼠标点击和悬停LI
                                    $(value.divTip).children().
                                            hover(function(){
                                                indexLi = $(this).index();
                                                //获取当前鼠标悬停时的LI索引值;
                                                if($(this).index()!=0){
                                                    $(this).addClass("active").siblings().removeClass();
                                                }
                                            }
                                    )
                                    //按键盘的上下移动LI的背景色
                                    $this.keydown(function(event){
                                                if(event.which == 38){
                                                    //向上
                                                    keychang("up")
                                                }
                                                else if(event.which == 40){
                                                    //向下
                                                    keychang()
                                                }
                                                else if(event.which == 13){
                                                    //回车
                                                    var liVal = $(value.divTip).children().eq(indexLi).text();
                                                    $this.val(liVal);
                                                    blus();
                                                }
                                            }
                                    )
                                }
                            }
                    )
                }
        )(jQuery)
        //使用
        $(function(){
                    $("#loginName").changeTips({
                                divTip:".on_changes"
                            }
                    );
                }
        )

    </script>
</head>
<body>
<div class="login">
    <div class="ln">
        <input type="text" maxlength="128" name="loginName" id="loginName" placeholder="邮箱/会员帐号/手机号" />
    </div>
    <ul class="on_changes">
        <li email="">请选择邮箱类型
        </li>
        <li email="">
        </li>
        <li email="@sina.com">
        </li>
        <li email="@163.com">
        </li>
        <li email="@qq.com">
        </li>
        <li email="@hotmail.com">
        </li>
        <li email="@126.com">
        </li>
        <li email="@gmail.com">
        </li>
        <li email="@yahoo.com">
        </li>
    </ul>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/gyz418/p/5542905.html

weixin_30824479

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度下拉搜索

百度下拉搜索<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jq...
复制链接

扫一扫