如何使用文本框值过滤多个选择中的值 [英] How to filter values in Multiple selection using textbox value
问题描述
我有一个文本框和多个选择框。当我在文本框中写东西时，它会在多个选择中过滤该文本并仅显示匹配的值。
I have a text box and multiple selection box. When ever I write something in text box it will filter that text in the multiple selection and show only matched value.
<!DOCTYPE html>
<html>
<body>
<select id="uniqueCarNames" name="cars" multiple>
<option value="volvo">Long Distance Travel</option>
<option value="saab">Amazing </option>
<option value="opel">Excellent Travelling</option>
<option value="audi">I am rich</option>
</select>
<input type="text" id="filterMultipleSelection" />
</body>
</html>
因此，如果我开始在输入框中书写，它将开始过滤选择框中的值。我想要使用选项标签的文本进行过滤。
请指导。
So if I start writing in input box it will start filtering the values in selection box. I want the filtering using text of option tag. Please guide.
推荐答案
.filter（function） jQuery方法可用于查找目标选项元素并按如下方式显示它们。 JavaScript方法 .toLowerCase（）用于使搜索不区分大小写：
The .filter(function) jQuery method can be used to find the target option elements and show them as follows. The JavaScript method .toLowerCase() is used to make the search case-insensitive:
$('#filterMultipleSelection').on('input', function() {
var val = this.value.toLowerCase();
$('#uniqueCarNames > option').hide()
.filter(function() {
return this.value.toLowerCase().indexOf( val ) > -1;
})
.show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="uniqueCarNames" name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="text" id="filterMultipleSelection" />
这篇关于如何使用文本框值过滤多个选择中的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
