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.

Solution 1:

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

Share