50 lines
1.2 KiB
HTML
50 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<meta charset="utf-8">
|
|
<head>
|
|
<link rel="stylesheet" href="../../build/css/tom-select.bootstrap5.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css">
|
|
<script src="../../build/js/tom-select.complete.js"></script>
|
|
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.bundle.min.js"></script> -->
|
|
<script src="bootstrap.bundle.js"></script>
|
|
<style>
|
|
.ts-input.has-items > input::placeholder {
|
|
color:transparent;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="p-4">
|
|
<form method="get">
|
|
<input name="before" />
|
|
<select id="input-tags" placeholder="How cool is this?" multiple>
|
|
<optgroup label="A">
|
|
<option>One</option>
|
|
<option>Two</option>
|
|
</optgroup>
|
|
<optgroup label="B">
|
|
<option>One</option>
|
|
<option>Two</option>
|
|
</optgroup>
|
|
</selec>
|
|
<input name="before" />
|
|
<button type="submit">submit</button>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
var ts = new TomSelect("#input-tags",{
|
|
//persist: false,
|
|
//createOnBlur: true,
|
|
create: true,
|
|
duplicates: true,
|
|
//hidePlaceholder: true,
|
|
});
|
|
|
|
</script>
|
|
</html>
|