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

Question

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

s_k*_*k_t 3 javascript jquery html5 autocomplete drop-down-menu

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

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Pet*_*rKA 6

该.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();
});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

使用return $(this).text().toLower ...来代替. (2认同)

归档时间：	10 年，5 月前
查看次数：	1551 次
最近记录：	9 年，9 月前