常用的點擊搜索框顯示下拉框並實時刷新用戶輸入的內容




<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());
    });
 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章