我在select标签和输入文本框中有一些选项。一旦用户在文本框中输入内容,就应显示相关选项,其余部分需要隐藏。
<select size="8" style="width:150;">
<option value="something1">Apple</option>
<option value="something1">Banana</option>
<option value="something2">Mango</option>
<option value="something2">Orange</option>
<option value="something2">Papaya</option>
<option value="something3">Grape</option>
<option value="something3">Coco</option>
<option value="something3">Chocolate</option>
</select>
<input type="text" >
当我在文本框中输入ap
时,只有Apple,Papaya应该可见..请让我知道如何通过jQuery实现这一目标..
答案 0 :(得分:5)
演示: http://so.devilmaycode.it/narrow-down-the-select-options-from-text-search-using-jquery
$(function() {
$('input.search').on('change', function() {
$(this).prev('select.term').find('option:not(:containsi(' + this.value + '))').hide();
}).on('keyup', function() {
$(this).prev('select.term').find('option:containsi(' + this.value + ')').show().attr('selected', true);
}).extend($.expr[':'], {
'containsi' : function(elem, i, match, array) {
return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || '').toLowerCase()) >= 0;
}
});
});
答案 1 :(得分:0)