jQuery擴展搜索圖標輸入，不太工作

我有這個搜索框，我迄今爲止做的，但新的JS，所以有點卡住了。jQuery擴展搜索圖標輸入，不太工作

我需要它向右滑動以顯示它後面的輸入，它在我使用按鈕時發揮作用，但我猜想我只需添加圖標，以便在單擊它時不會提交但滑過，但是那麼當你在輸入中輸入某些東西時，我想也需要讓按鈕顯示和圖標隱藏，如果不是，當你點擊圖標時會再次關閉。

東西有點像這個我猜.... http://codepen.io/nikhil/pen/qcyGF - 這是我一直試圖根據它。

searchExpand = function(elm){ 
 
    var spanIcon = $('.span-icon'), 
 
    searchInput = $('.search-input'), 
 
    searchForm = $('.search-form'), 
 
    btnSearch = $('.btn-search'), 
 
    isOpen = false; 
 

 
    if(isOpen == false){ 
 
    searchForm.addClass('open'); 
 
    spanIcon.hide(); 
 
    btnSearch.show(); 
 
    searchInput.focus(); 
 
    isOpen = true; 
 
    } else { 
 
    searchForm.removeClass('open'); 
 
    btnSearch.hide(); 
 
    spanIcon.show(); 
 
    searchInput.focusout(); 
 
    isOpen = false; 
 
    } 
 
} 
 

 
$(document).ready(function(){ 
 
    
 
    // lets make the search feature happen! 
 
    $(document).on("click", "span.btn-search", function() { 
 
    searchExpand(this); 
 
    }); 
 

 
});

.search-form { 
 
    width: 0%; 
 
} 
 

 
.search-form input { 
 
    border-right-style: none; 
 
} 
 

 
.search-form button { 
 
    background: none; 
 
    padding: 0; 
 
    display: none; 
 
} 
 

 
.search-form button i { 
 
    font-size: 1.9em; 
 
    color: #000; 
 
    padding: 10px; 
 
} 
 

 
.search-form span.search-icon { 
 
    font-size: 1.9em; 
 
    color: #000; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
} 
 

 
.search-form .form-control { 
 
    padding: 0; 
 
    border: 0; 
 
} 
 

 
.search-form .input-group-addon { 
 
    background: #fff; 
 
    border: 0; 
 
} 
 

 
.search-form.open { 
 
    width: 100%; 
 
} 
 

 
.search-form.open .form-control { 
 
    padding: 30px 25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<form role="search" class="search-form"> 
 
    <div class="input-group add-on"> 
 
    <input type="text" class="form-control search-input" placeholder="Enter a search term" name="search" id="search"> 
 
    <div class="input-group-addon"> 
 
     <button class="btn btn-clear btn-search" type="submit"><i class="glyphicon glyphicon-search search-icon"></i></button> 
 
     <span class="span-icon glyphicon glyphicon-search search-icon"></span> 
 
    </div> 
 
    </div> 
 
</form>

來源

2016-02-23 James

這是非常難以理解什麼是你想要什麼，什麼是不工作......你可能會更新你的問題，並更具體一點？你可以把它分成：「會發生什麼事」和「這就是我想要的」，或者圍繞這些路線...... – webeno

請注意，您的.btn搜索不是一個跨度裏面，所以你的函數，searchExpand將無法運行。當你點擊按鈕。

是什麼在跨度「跨度圖標glyphicion ......」

如果你使用jQuery，這將是你想要實現的有效途徑：

分配一個ID跨度叫什麼，你會和改變你的JS反映：新跨越的

$("#yourbuttonidname").click(function() { 
    searchExpand(this); 
    });

例子：

<span id="yourbuttonidname" class="span-icon glyphicon glyphicon-search search-icon"></span>

來源

2016-02-23 23:17:58 KTHero

jQuery擴展搜索圖標輸入，不太工作

回答

相關問題