[英]Narrow down the select options from Text search using jQuery
I have some options in a select tag and a input text box.我在 select 标记和输入文本框中有一些选项。 Once user enters something in text box the related options should be displayed rest needs to be hidden.
用户在文本框中输入内容后,应显示相关选项 rest 需要隐藏。
<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" >
When I enter ap
in text box, only Apple, Papaya should be visible.. Please let me know how I can achieve this by jQuery..当我在文本框中输入
ap
时,应该只看到 Apple、Papaya。请告诉我如何通过 jQuery 实现这一点。
demo: https://so.lucafilosofi.com/narrow-down-the-select-options-from-text-search-using-jquery演示: https://so.lucafilosofi.com/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;
}
});
});
i suggest you to search and look at this SO post:我建议您搜索并查看此 SO 帖子:
Jquery: Filter dropdown list as you type Jquery:在您键入时过滤下拉列表
or this example URL或者这个例子 URL
http://andrew.hedges.name/experiments/narrowing/ http://andrew.hedges.name/experiments/narrowing/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.