bootstrap5-tags
Version:
Replace select[multiple] with nices badges for Bootstrap 5
137 lines (134 loc) • 6.63 kB
HTML
<html lang="en" class="no-js">
<head>
<title>Bootstrap 4 tags demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.bundle.min.js" type="module"></script>
<script type="module">
import Tags from "./tags.js";
Tags.init("select:not(.ignore-tags)");
</script>
</head>
<body>
<div class="container">
<h1>Demo</h1>
<form class="needs-validation" novalidate method="get" action="https://vercel-dumper.vercel.app/">
<div class="row mb-3 g-3">
<div class="col-md-4 form-group">
<label for="validationTags" class="form-label">Tags</label>
<select class="form-control" id="validationTags" name="tags[]" multiple>
<option disabled hidden value="">Choose a tag...</option>
<option value="1" selected="selected">Apple</option>
<option value="2">Banana</option>
<option value="3">Orange</option>
</select>
<div class="invalid-feedback">Please select a valid tag.</div>
</div>
</div>
<div class="row mb-3 g-3">
<div class="col-md-4 form-group">
<label for="validationTagsClear" class="form-label">Tags (allow clear)</label>
<select class="form-control" id="validationTagsClear" name="tagsClear[]" multiple data-allow-clear="true">
<option disabled hidden value="">Choose a tag...</option>
<option value="1" selected="selected">Apple</option>
<option value="2">Banana</option>
<option value="3">Orange</option>
</select>
<div class="invalid-feedback">Please select a valid tag.</div>
</div>
<div class="col-md-4 form-group">
<label for="validationTagsClearEnd" class="form-label">Tags (allow clear end)</label>
<select class="form-control" id="validationTagsClearEnd" name="validationTagsClearEnd[]" multiple
data-clear-end="true"
data-allow-clear="true">
<option disabled hidden value="">Choose a tag...</option>
<option value="1" selected="selected">Apple</option>
<option value="2">Banana</option>
<option value="3">Orange</option>
</select>
<div class="invalid-feedback">Please select a valid tag.</div>
</div>
<div class="col-md-4 form-group" dir="rtl">
<label for="validationTagsClearEndRtl" class="form-label">Tags (allow clear end rtl)</label>
<select class="form-control" id="validationTagsClearEndRtl" name="validationTagsClearEndRtl[]" multiple
data-clear-end="true"
data-allow-clear="true">
<option disabled hidden value="">Choose a tag...</option>
<option value="1" selected="selected">Apple</option>
<option value="2">Banana</option>
<option value="3">Orange</option>
</select>
<div class="invalid-feedback">Please select a valid tag.</div>
</div>
</div>
<div class="row mb-3 g-3">
<div class="col-md-4 form-group">
<label for="validationTagsThreshold" class="form-label">Tags (allow clear + 0 threshold)</label>
<select class="form-control" id="validationTagsThreshold" name="tagsClearThreshold[]" multiple data-allow-clear="true" data-suggestions-threshold="0">
<option disabled hidden value="">Choose a tag...</option>
<option value="1" selected="selected">Apple</option>
<option value="2">Banana</option>
<option value="3">Orange</option>
</select>
<div class="invalid-feedback">Please select a valid tag.</div>
</div>
</div>
<div class="row mb-3 g-3">
<div class="col-md-4 form-group">
<label for="validationTagsShow" class="form-label">Tags (show all)</label>
<select class="form-control" id="validationTagsShow" name="tags_show[]" multiple data-show-all-suggestions="true">
<option disabled hidden value="">Choose a tag...</option>
<option value="1" selected="selected">Apple</option>
<option value="2">Banana</option>
<option value="3">Orange</option>
<option value="4">Blueberry</option>
<option value="5">Strawberry</option>
<option value="6">Cranberry</option>
<option value="7">Huckleberry</option>
<option value="8">Chokeberry</option>
<option value="9">Elderberry</option>
<option value="10">Gooseberry</option>
<option value="11">Blackberry</option>
<option value="12">Raspberry</option>
<option value="13">Goji berry</option>
<option value="14">Salmon berry</option>
<option value="15">Sumac berry</option>
</select>
<div class="invalid-feedback">Please select a valid tag.</div>
</div>
</div>
<div class="row mb-3 g-3">
<div class="col-md-4">
<label for="singleTagsFirst" class="form-label">Tags (single - first value selected by default)</label>
<select
class="form-control"
id="singleTagsFirst"
name="tags_single_first"
data-allow-clear="1"
data-suggestions-threshold="0"
placeholder="Please select"
>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Orange</option>
</select>
</div>
</div>
<div class="row mb-3 g-3">
<div class="col-md-4 form-group">
<label for="validationTagsNew" class="form-label">Tags (allow new)</label>
<select class="form-control" id="validationTagsNew" name="tags_new[]" multiple data-allow-new="true">
<option disabled hidden value="">Choose a tag...</option>
<option value="1" selected="selected">Apple</option>
<option value="2">Banana</option>
<option value="3">Orange</option>
</select>
<div class="invalid-feedback">Please select a valid tag.</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
</div>
</body>
</html>