index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Select Search Test</title>
        <link rel="stylesheet" href="select-search.css">
    </head>
    <body>
        <select class="form-select" id="requestreprint-user_username" name="user_username">
            <option value="">---</option>
            <optgroup label="Group 1">
                <option value="dolores-damore">Dolores D'Amore</option>
                <option value="dr-rasheed-walter">Dr. Rasheed Walter</option>
                <option value="eliza-krajcik">Eliza Krajcik</option>
                <option value="dolores-damore-1">Dolores D'Amore</option>
                <option value="dr-rasheed-walter-1">Dr. Rasheed Walter</option>
                <option value="eliza-krajcik-1">Eliza Krajcik</option>
                <option value="dolores-damore-2">Dolores D'Amore</option>
                <option value="dr-rasheed-walter-2">Dr. Rasheed Walter</option>
                <option value="eliza-krajcik-2">Eliza Krajcik</option>
                <option value="dolores-damore-3">Dolores D'Amore</option>
                <option value="dr-rasheed-walter-3">Dr. Rasheed Walter</option>
                <option value="eliza-krajcik-3">Eliza Krajcik</option>
            </optgroup>
            <optgroup label="Group 2">
                <option value="kendrick-lindgren">Kendrick Lindgren</option>
                <option value="laila-schamberger-ii">Laila Schamberger II</option>
                <option value="ms-ova-beier">Ms. Ova Beier</option>
                <option value="nannie-klocko">Nannie Klocko</option>
                <option value="kendrick-lindgren-1">Kendrick Lindgren</option>
                <option value="laila-schamberger-ii-1">Laila Schamberger II</option>
                <option value="ms-ova-beier-1">Ms. Ova Beier</option>
                <option value="nannie-klocko-1">Nannie Klocko</option>
                <option value="kendrick-lindgren-2">Kendrick Lindgren</option>
                <option value="laila-schamberger-ii-2">Laila Schamberger II</option>
                <option value="ms-ova-beier-2">Ms. Ova Beier</option>
                <option value="nannie-klocko-2">Nannie Klocko</option>
                <option value="kendrick-lindgren-3">Kendrick Lindgren</option>
                <option value="laila-schamberger-ii-3">Laila Schamberger II</option>
                <option value="ms-ova-beier-3">Ms. Ova Beier</option>
                <option value="nannie-klocko-3">Nannie Klocko</option>
            </optgroup>
            <optgroup label="Group 3">
                <option value="prof-roy-bartell">Prof. Roy Bartell</option>
                <option value="rosamond-nader">Rosamond Nader</option>
                <option value="triston-lesch">Triston Lesch</option>
                <option value="prof-roy-bartell-1">Prof. Roy Bartell</option>
                <option value="rosamond-nader-1">Rosamond Nader</option>
                <option value="triston-lesch-1">Triston Lesch</option>
                <option value="prof-roy-bartell-2">Prof. Roy Bartell</option>
                <option value="rosamond-nader-2">Rosamond Nader</option>
                <option value="triston-lesch-2">Triston Lesch</option>
                <option value="prof-roy-bartell-3">Prof. Roy Bartell</option>
                <option value="rosamond-nader-3">Rosamond Nader</option>
                <option value="triston-lesch-3">Triston Lesch</option>
            </optgroup>
        </select>
        
        <br><br>
        
        <select id="test">
            <option value="" data-icon="">---</option>
            <option value="1" data-icon="al">Albania</option>
            <option value="2" data-icon="aa" disabled>Andorra</option>
            <option value="3" data-icon="aa">Austria</option>
            <option value="4" data-icon="aa" disabled>Belarus</option>
            <option value="5" data-icon="aa">Belgium</option>
            <option value="6" data-icon="aa">Bosnia and Herzegovina</option>
            <option value="7" data-icon="aa">Bulgaria</option>
            <option value="8" data-icon="aa">Croatia</option>
            <option value="9" data-icon="aa">Czechia</option>
            <option value="10" data-icon="aa">Denmark</option>
            <option value="11" data-icon="aa">Estonia</option>
            <option value="12" data-icon="aa">Finland</option>
            <option value="13" data-icon="aa">France</option>
            <option value="14" data-icon="aa">Germany</option>
            <option value="15" data-icon="aa">Greece</option>
            <option value="16" data-icon="aa">Hungary</option>
            <option value="17" data-icon="aa">Iceland</option>
            <option value="18" data-icon="aa">Ireland</option>
            <option value="19" data-icon="aa">Italy</option>
            <option value="20" data-icon="aa">Latvia</option>
            <option value="21" data-icon="aa">Liechtenstein</option>
            <option value="22" data-icon="aa">Lithuania</option>
            <option value="23" data-icon="aa">Luxembourg</option>
            <option value="24" data-icon="aa">Malta</option>
            <option value="25" data-icon="aa">Moldova</option>
            <option value="26" data-icon="aa">Monaco</option>
            <option value="27" data-icon="aa">Montenegro</option>
            <option value="28" data-icon="aa">Netherlands</option>
            <option value="29" data-icon="aa">North Macedonia</option>
            <option value="30" data-icon="aa">Norway</option>
            <option value="31" data-icon="aa">Poland</option>
            <option value="32" data-icon="aa">Portugal</option>
            <option value="33" data-icon="aa">Romania</option>
            <option value="34" data-icon="aa">Russia</option>
            <option value="35" data-icon="aa">San Marino</option>
            <option value="36" data-icon="aa">Serbia</option>
            <option value="37" data-icon="aa">Slovakia</option>
            <option value="38" data-icon="aa">Slovenia</option>
            <option value="39" data-icon="aa">Spain</option>
            <option value="40" data-icon="aa">Sweden</option>
            <option value="41" data-icon="aa">Switzerland</option>
            <option value="42" data-icon="aa">Ukraine</option>
            <option value="43" data-icon="aa">United Kingdom</option>
        </select>
        
        <br><br>
        
        <select id="test2" multiple>
            <!-- <option value="" data-icon="">---</option> -->
            <option value="1" data-icon="al">Albania</option>
            <option value="2" data-icon="aa">Andorra</option>
            <option value="3" data-icon="aa">Austria</option>
            <option value="4" data-icon="aa" selected disabled>Belarus</option>
            <option value="5" data-icon="aa" selected>Belgium</option>
            <option value="6" data-icon="aa">Bosnia and Herzegovina</option>
            <option value="7" data-icon="aa" selected>Bulgaria</option>
            <option value="8" data-icon="aa">Croatia</option>
            <option value="9" data-icon="aa">Czechia</option>
            <option value="10" data-icon="aa">Denmark</option>
            <option value="11" data-icon="aa">Estonia</option>
            <option value="12" data-icon="aa">Finland</option>
            <option value="13" data-icon="aa">France</option>
            <option value="14" data-icon="aa">Germany</option>
            <option value="15" data-icon="aa">Greece</option>
            <option value="16" data-icon="aa">Hungary</option>
            <option value="17" data-icon="aa">Iceland</option>
            <option value="18" data-icon="aa">Ireland</option>
            <option value="19" data-icon="aa">Italy</option>
            <option value="20" data-icon="aa">Latvia</option>
            <option value="21" data-icon="aa">Liechtenstein</option>
            <option value="22" data-icon="aa">Lithuania</option>
            <option value="23" data-icon="aa">Luxembourg</option>
            <option value="24" data-icon="aa">Malta</option>
            <option value="25" data-icon="aa">Moldova</option>
            <option value="26" data-icon="aa">Monaco</option>
            <option value="27" data-icon="aa">Montenegro</option>
            <option value="28" data-icon="aa">Netherlands</option>
            <option value="29" data-icon="aa">North Macedonia</option>
            <option value="30" data-icon="aa">Norway</option>
            <option value="31" data-icon="aa">Poland</option>
            <option value="32" data-icon="aa">Portugal</option>
            <option value="33" data-icon="aa">Romania</option>
            <option value="34" data-icon="aa">Russia</option>
            <option value="35" data-icon="aa">San Marino</option>
            <option value="36" data-icon="aa">Serbia</option>
            <option value="37" data-icon="aa">Slovakia</option>
            <option value="38" data-icon="aa">Slovenia</option>
            <option value="39" data-icon="aa">Spain</option>
            <option value="40" data-icon="aa">Sweden</option>
            <option value="41" data-icon="aa">Switzerland</option>
            <option value="42" data-icon="aa">Ukraine</option>
            <option value="43" data-icon="aa">United Kingdom</option>
        </select>
        
        <script type="module">
            import SelectSearch from './select-search.js';
            
            window.select_search = new SelectSearch("#test", {
                display_empty: true,
                render(element){
                    return "<b>" + element.getAttribute("data-icon") + "</b> " + element.textContent
                },
                onSelect(element, value, text){
                    // console.log(element, value, text);
                }
            });
            window.select_search2 = new SelectSearch("#test2", {
                render(element){
                    return "<b>" + element.getAttribute("data-icon") + "</b> " + element.textContent
                },
                onSelect(element, value, text){
                    // console.log(element, value, text);
                }
            });
            
            window.user = new SelectSearch('#requestreprint-user_username', {
                display_empty: true,
                // custom_class: {
                //     placeholder: "form-select mw-100 p-2"
                // },
                // render(element){
                    
                // },
                // onSelect(item, id, element) {
                    
                // }
            });
        </script>
    </body>
</html>