如何使用文本框值过滤多项选择中的值

Question

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

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

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

Answer 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" />

如何使用文本框值过滤多项选择中的值

How to filter values in Multiple selection using textbox value

html

javascript

jquery

autocomplete

drop-down-menu