jQuery輸入匹配下拉框是一種常見(jiàn)的交互式界面，可以讓用戶(hù)輕松選擇他們需要的選項(xiàng)。下拉菜單是一種經(jīng)典的輸入控件，但是只有當(dāng)選項(xiàng)很少時(shí)才適用。當(dāng)頁(yè)面中的選項(xiàng)過(guò)多時(shí)，輸入匹配下拉框可以非常有用。
<div class="dropdown">
<input type="text" placeholder="Search">
<ul class="dropdown-menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("input").keyup(function(){
var value = $(this).val();
$("ul li").each(function(){
if($(this).text().search(value) >= 0){
$(this).show();
}else{
$(this).hide();
}
});
});
});
</script>上述代碼中，我們首先創(chuàng)建了一個(gè)
元素包含一個(gè)元素和
- 元素。這個(gè)下拉框的樣式可以通過(guò)CSS樣式表進(jìn)行自定義。
通過(guò)jQuery的keyup()方法，我們可以給元素添加一個(gè)觸發(fā)事件，這個(gè)事件會(huì)檢查用戶(hù)鍵入的文本并將該文本與下拉框中的每個(gè)選項(xiàng)進(jìn)行比較。如果文本匹配，則顯示該選項(xiàng)，否則隱藏該選項(xiàng)。
輸入匹配下拉框可以讓用戶(hù)輕松地篩選和選擇他們需要的選項(xiàng)，并且可以在頁(yè)面中保存大量的選項(xiàng)，減少頁(yè)面的混亂度，提高用戶(hù)體驗(yàn)。