所以我试图隐藏列表中的选项,以便它们只显示为人物类型。我已经尝试使用谷歌搜索并查看本网站上的其他问题,但我还没有找到我想要的答案。
<script>
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
答案 0 :(得分:1)
如果您不是在寻找自动填充功能,那么我认为Select2可以提供帮助。 结帐example。
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet"/>
<select class="js-example-basic-single" name="state" style='width: 150px'>
<option value="">--Select--</option>
<option value="BR">Britain</option>
<option value="CA">California</option>
<option value="DEL">Delhi</option>
<option value="FL">Florida</option>
<option value="HK">Hong Kong</option>
<option value="LND">London</option>
<option value="MAC">Macau</option>
</select>
答案 1 :(得分:0)
检查每个选项,如果文本框中的文本以文本框中的文本开头,则隐藏不匹配的元素
var text='';
var count=0;
$(function() {
$("#searchbox").keyup(function() {
count=0;
text=$(this).val().toLowerCase();
$("#listbox > option").each(function() {
if($(this).text().toLowerCase().startsWith(text) && text != "") {
count++;
$(this).css("display","block");
}
else {
$(this).css("display","none");
}
});
if(count > 0) {
$("#listbox").css("display","block");
}
else {
$("#listbox").css("display","none");
}
if(count > 1) {
$("#listbox").attr('size', count);
}
else {
$("#listbox").attr('size', 2);
}
});
})
&#13;
textarea, select {
width: 200px;
font-size: 20px
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="searchbox"></textarea>
<br>
<select id="listbox" style="display: none" name="listbox" size="5">
<option style="display: none">Ad</option>
<option style="display: none">Ab</option>
<option style="display: none">Bi</option>
<option style="display: none">Bo</option>
<option style="display: none">Ca</option>
<option style="display: none">Co</option>
</select>
&#13;
jsfiddle:http://jsfiddle.net/2ypx1yyy/5/