阅读背景:

常用的点击搜索框显示下拉框并实时刷新用户输入的内容

来源:互联网 

<div class="col-sm-3">
                <div class="dropdown">
                <div class=" input-group">   //boot 输入框组
                    <input class="form-control" id="search" type="text" placeholder="请输入问题或话题..." required >
                    <span class="input-group-btn">
                        <button class="btn btn-default">搜索</button>
                    </span>
                </div>
                    <ul class="dropdown-menu topic-drop">     //下拉标题
                        <li class="dropdown-content">输入关键字进行搜索</li>
                        <li class="dropdown-content" >搜索:<a id="result"></a> </li>
                        <li class="divider"></li>   //分割线
                        <li><button class="btn btn-success">发起问题</button> </li>
                    </ul>

                </div>



 $("#search").focus(function(){     //输入框获取焦点打开下拉菜单
        $(".dropdown-menu").css("display","block");
    })
             .blur(function(){       //输入框失去焦点关闭下拉菜单
       $(".dropdown-menu").css("display","none");
    });


 $(function(){

        $('#search').bind('input propertychange(为匹配IE)', function() { 
 //可以换用on()方法 可以同时绑定多个事件 此input、propertychange为Input内容改变触发

        $('#result').html($(this).val());
    });
 

<div class="col-sm-3">
                <div c



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: