-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (98 loc) · 4.51 KB
/
index.html
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
102
103
104
105
106
107
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Yohn/[email protected]/css/pico.lime.css">
<link rel="stylesheet" href="yoSelect.css">
<title>YoSelect by Yohn</title>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-8 offset-2">
<h1>YoSelect</h1>
<select class="yoSelect" data-yo-search="true" data-yo-clearable="true" data-yo-creatable="true">
<option value="">Select a country</option>
<option value="us" data-yo-img="https://flagcdn.com/w40/us.png">United States</option>
<option value="gb" data-yo-img="https://flagcdn.com/w40/gb.png">United Kingdom</option>
<option value="fr" data-yo-img="https://flagcdn.com/w40/fr.png">France</option>
<option value="de" data-yo-img="https://flagcdn.com/w40/de.png">Germany</option>
<option value="it" data-yo-img="https://flagcdn.com/w40/it.png">Italy</option>
</select>
<h2>YoSelect Component Demo</h2>
<h3>Searchable Tags with Create Option</h3>
<select id="tags" multiple search creatable>
<option value="frontend">Frontend</option>
<option value="backend">Backend</option>
<option value="database">Database</option>
<option value="api">API</option>
<option value="testing">Testing</option>
<option value="devops">DevOps</option>
</select>
<hr>
<h3>Basic Single Select with Search</h3>
<select id="countries" data-yo-search="true">
<option value="">Select a country</option>
<option value="us" data-yo-img="https://flagcdn.com/w40/us.png">United States</option>
<option value="gb" data-yo-img="https://flagcdn.com/w40/gb.png">United Kingdom</option>
<option value="fr" data-yo-img="https://flagcdn.com/w40/fr.png">France</option>
<option value="de" data-yo-img="https://flagcdn.com/w40/de.png">Germany</option>
<option value="it" data-yo-img="https://flagcdn.com/w40/it.png">Italy</option>
<option value="es" data-yo-img="https://flagcdn.com/w40/es.png">Spain</option>
<option value="pt" data-yo-img="https://flagcdn.com/w40/pt.png">Portugal</option>
<option value="nl" data-yo-img="https://flagcdn.com/w40/nl.png">Netherlands</option>
<option value="be" data-yo-img="https://flagcdn.com/w40/be.png">Belgium</option>
<option value="ch" data-yo-img="https://flagcdn.com/w40/ch.png">Switzerland</option>
</select>
<h3>Multiple Select with Search and Create</h3>
<select id="technologies" multiple data-yo-search="true" data-yo-creatable="true">
<option value="js"
data-yo-img="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg">
JavaScript
</option>
<option value="ts"
data-yo-img="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg">
TypeScript
</option>
<option value="react"
data-yo-img="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg">
React</option>
<option value="vue" data-yo-img="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg">
Vue.js</option>
<option value="angular"
data-yo-img="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg">Angular
</option>
<option value="node"
data-yo-img="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg">
Node.js</option>
</select>
</div>
</div>
</div>
<script src="yoSelect.js"></script>
<script>
// Initialize selects with custom configurations
// Initialize selects with custom configurations
const countrySelect = new YoSelect(document.querySelector('#countries'), {
search: true, // Enable search explicitly
searchPlaceholder: 'Search countries...',
noResultsPlaceholder: 'No countries found'
});
const techSelect = new YoSelect(document.querySelector('#technologies'), {
search: true, // Enable search explicitly
creatable: true,
searchPlaceholder: 'Search technologies...',
noResultsPlaceholder: 'No technologies found',
classTag: 'tech-tag'
});
const tagSelect = new YoSelect(document.querySelector('#tags'), {
searchPlaceholder: 'Search or create tags...',
noResultsPlaceholder: 'No matching tags',
addOptionPlaceholder: 'Press Enter to create "<strong>[searched-term]</strong>" tag',
classTag: 'tag-badge'
});
</script>
</body>
</html>