jQuery輸入匹配下拉框是一種常見的交互式界面，可以讓用戶輕松選擇他們需要的選項。下拉菜單是一種經典的輸入控件，但是只有當選項很少時才適用。當頁面中的選項過多時，輸入匹配下拉框可以非常有用。
<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>上述代碼中，我們首先創建了一個
元素包含一個元素和
- 元素。這個下拉框的樣式可以通過CSS樣式表進行自定義。
通過jQuery的keyup()方法，我們可以給元素添加一個觸發事件，這個事件會檢查用戶鍵入的文本并將該文本與下拉框中的每個選項進行比較。如果文本匹配，則顯示該選項，否則隱藏該選項。
輸入匹配下拉框可以讓用戶輕松地篩選和選擇他們需要的選項，并且可以在頁面中保存大量的選項，減少頁面的混亂度，提高用戶體驗。
上一篇jquery輸入框只讀
下一篇css怎么加表格線