Phil's Notes

Filtering a Select List

javascript

Here’s an example of how to filter a select list by user input.

const completeList = document.getElementById("myList").cloneNode(true);
let filteredList = document.getElementById("myList");
 
const filterText = document.getElementById("filterText");
 
const updateList = (e) => {
    // Copy the completeList to the filteredList
    // then go through the filteredList and add
    // any options that match the filter criteria
 
    // Clear out the filteredList of all options
    filteredList.options.length = 0;
 
    Array.from(completeList.options).forEach((option) => {
        let optionText = option.text.toLowerCase();
        if (optionText.includes(filterText.value.toLowerCase())) {
            const newOption = new Option(option.text, option.value);
            filteredList.options.add(newOption);
        }
    });
}
 
filterText.addEventListener('input', updateList);

First, we clone the complete list of options already available on the page. If you try to create a variable of the list without cloning it like so:

const completeList = document.getElementById("myList");

You will end up editing the actual list directly. We make a clone so that we always have that master list when the filter changes, otherwise when the user changes the filter criteria it will filter from what is left of the filtered list.

Next is the function updateList(). This is what we want to happen every time the user enters a key into the input box. What it does is empties out the filteredList and then goes through all the options in the completeList, if the option text matches what the user wants to filter by, it is added to the filteredList.

Lastly, we set the event listener to call the updateList() function whenever the input box is updated.

You can see it in action here:

And here you can see the entire example in one HTML file:

<!DOCTYPE html>
<html>

<head>
    <title>Filter List Test</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
        .container {
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="form-group">
            <label for="filterText">Filter:</label>
            <input type="text" id="filterText" class="form-control">
        </div>
        <div class="form-group">
            <select multiple="multiple" size="10" class="form-control" id="myList">
                <option value="1">First Option</option>
                <option value="2">Second Option</option>
                <option value="3">Third Option</option>
            </select>
        </div>
    </div>

    <script>
        const completeList = document.getElementById("myList").cloneNode(true);
        let filteredList = document.getElementById("myList");

        const filterText = document.getElementById("filterText");

        const updateList = (e) => {
            // Copy the completeList to the filteredList
            // then go through the filteredList and add
            // any options that match the filter criteria

            // Clear out the filteredList of all options
            filteredList.options.length = 0;

            Array.from(completeList.options).forEach((option) => {
                let optionText = option.text.toLowerCase();
                if (optionText.includes(filterText.value.toLowerCase())) {
                    const newOption = new Option(option.text, option.value);
                    filteredList.options.add(newOption);
                }
            });
        }

        filterText.addEventListener('input', updateList);
    </script>
</body>

</html>