javascript - 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.

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.

Share Improve this question edited Jun 17, 2015 at 20:18 asked Jun 16, 2015 at 23:00 s_k_t 7391 gold badge16 silver badges41 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 7

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

Programmer puzzle solving

javascript - How to filter values in Multiple selection using textbox value - Stack Overflow

1 Answer 1

Articles related to this article

comment list (0)