<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());
});
常用的點擊搜索框顯示下拉框並實時刷新用戶輸入的內容
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.