如何使用文本框值过滤多选中的值答案

【问题标题】：How to filter values in Multiple selection using textbox value如何使用文本框值过滤多选中的值
【发布时间】：2015-09-01 23:39:31
【问题描述】：

我有一个文本框和多选框。当我在文本框中写东西时，它会过滤多选中的文本并仅显示匹配的值。

<!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>

因此，如果我开始在输入框中写入，它将开始过滤选择框中的值。我想要使用选项标签的文本进行过滤。请指导。

【问题讨论】：

标签： javascript jquery html drop-down-menu autocomplete

【解决方案1】：

.filter(function) jQuery 方法可用于查找目标选项元素并显示如下。 JavaScript方法.toLowerCase()用于搜索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" />

【讨论】：

感谢您的解决方案，我需要一个帮助。在这里您已经使用选项值进行过滤，如果我的值和选项标签的文本不同，我该怎么办。就像一样，如何使用文本“Master Car”进行过滤。
我将 .value 更改为 .text 并且它可以正常工作。这是我的错误。对不起:)
使用 return $(this).text().toLower... 代替。
如果您觉得这有帮助，请不要忘记接受这个答案。