vanillaFakeSelect/index.html at master · JavaScriptUtilities/vanillaFakeSelect · 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE HTML>
<html lang="en-EN">
    <head>
    <meta charset="UTF-8" />
    <title>Vanilla Fake Select</title>
    <link rel="stylesheet" type="text/css" href="css/style.css?v=0.12.5" />
    <link rel="stylesheet" type="text/css" href="css/fake-select.css?v=0.12.5" />
    <link rel="stylesheet" type="text/css" href="css/fake-select-demo.css?v=0.12.5" />
    <script src="js/script.js?v=0.13.0"></script>
    <script src="js/fake-select.js?v=0.13.0"></script>
    </head>
    <body>
        <h1>Vanilla Fake Select</h1>
        <p>
            This script duplicates your select element to totally skin it.<br />
            No library dependency ✌️
        </p>

        <h2>Example</h2>
        <label for="test-select">My select field</label>
        <select name="test-select" id="test-select">
            <option value="" disabled selected style="display:none;">Select a value</option>
            <option value="0">a Value 0</option>
            <option value="1">ab Value 1</option>
            <option value="2">b Value 2</option>
            <option value="2b" disabled>Value 2b</option>
            <option value="3">c Value 3</option>
            <option value="4">cd Value 4</option>
            <option value="5">éd Value 5 axétest</option>
        </select>
        <script class="display-style">new vanillaFakeSelect(document.getElementById('test-select'), {
    coverClass: 'fakeselect--demo'
});</script>

        <h2>Example with optgroup</h2>
        <select name="test-select-opt" id="test-select-opt">
            <optgroup label="Test Label">
                <option value="0">a Value 0</option>
                <option value="1">ab Value 1</option>
                <option value="2">b Value 2</option>
            </optgroup>
            <optgroup label="Test Label 2">
                <option value="2b" disabled>Value 2b</option>
                <option value="3">c Value 3</option>
                <option value="4">cd Value 4</option>
            </optgroup>
        </select>
        <script class="display-style">new vanillaFakeSelect(document.getElementById('test-select-opt'), {
    coverClass: 'fakeselect--demo'
});</script>

        <h2>Example with disabled</h2>
        <select disabled name="test-select-dis" id="test-select-dis">
            <option value="0">a Value 0</option>
            <option value="1">ab Value 1</option>
            <option value="2">b Value 2</option>
            <option value="2b" disabled>Value 2b</option>
            <option value="3">c Value 3</option>
            <option value="4">cd Value 4</option>
        </select>
        <script class="display-style">new vanillaFakeSelect(document.getElementById('test-select-dis'), {
    coverClass: 'fakeselect--demo'
});</script>

        <h2>How to use it</h2>
        <p>Download the <a target="_blank" href="https://github.com/JavaScriptUtilities/vanillaFakeSelect/archive/master.zip">latest version</a> and add in your head section :</p>
        <pre class="display-style">&lt;link href=&quot;js/fake-select.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
&lt;script src=&quot;js/fake-select.min.js&quot;&gt;&lt;/script&gt;</pre>
        <p>Load demo skin or use it to create your own :</p>
        <pre class="display-style">&lt;link href=&quot;js/fake-select-demo.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;</pre>
        <p>Init the script at domready or later :</p>
        <pre class="display-style">new vanillaFakeSelect(document.getElementById('test-select'));</pre>

        <h2>Settings</h2>
        <p>You can customize the script by adding custom settings at init.</p>

        <div>
            <select name="test-select-2" id="test-select-2">
                <option value="0">a Value 0</option>
                <option value="1">ab Value 1</option>
                <option value="2">b Value 2</option>
                <option value="2b" disabled>Value 2b</option>
                <option value="3">c Value 3</option>
                <option value="4">cd Value 4</option>
            </select>
        </div>
        <script class="display-style">var vfsSettings = {
    /* Autocompletion search text in all term */
    autocompleteInsideTerm: true,
    // Default value
    coverText: 'My default value',
    // CSS class for wrapper
    coverClass: 'fakeselect--demo',
    // When too many results, enable automatic scroll into view
    enableScrollIntoView: false,
    // Template for fake list item content
    fakeOptionTemplate: function(el){return '-- ' + el.innerHTML;}
};
new vanillaFakeSelect(document.getElementById('test-select-2'), vfsSettings);</script>
    </body>
</html>