search-select/examples/example.html at master · workindia/search-select · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
    <head>

        <style>
            .container {
                width: 120px;
            }

            .input-item {
                height: 20px !important;
            }
        </style>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/workindia/search-select@1.0.1/search-select.css">
        <script src="https://cdn.jsdelivr.net/gh/workindia/search-select@1.0.1/search-select.js"></script>
        <script>
            window.addEventListener('DOMContentLoaded', function(ev) {
                const searchSelectDropdown = new SearchSelect('#dropdown-input', {
                    data: ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'],
                    filter: SearchSelect.FILTER_CONTAINS,
                    sort: undefined,
                    inputClass: 'input-item form-control',
                    maxOpenEntries: 9,
                    searchPosition: 'top',
                    onInputClickCallback: function(ev) { console.log('Input Clicked') },
                    onInputKeyDownCallback: function(ev) { console.log('Input Key Down') },
                });
            });
        </script>
    </head>
    <body>
        <div class="container">
            <input id="dropdown-input"
                name="dropdown-input"
                class="Search-Select--Hidden-Input"
                placeholder="Pick Your Item"
                data-search-placeholder="Search Your Item"
                hidden/>
        </div>

        <button style="padding: 8px;
                       margin-top: 10px;
                       color: white;
                       background-color: cadetblue;
                       border-radius: 3px;"
                onclick="document.getElementById('selectedValue').innerHTML = document.getElementById('dropdown-input').value;">
            Get Value!
        </button>
        <label id="selectedValue"></label>
    </body>
</html>