@ezmodus/select-picker
Version:
Improve HTML <select> element to have live search and better selection process. Written with native JavaScript
476 lines (456 loc) • 23.3 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ezmodus select picker</title>
<link href="../dist/style.css" rel="stylesheet" />
<link href="../dist/demo.css" rel="stylesheet" />
<script src="../dist/bootstrap.js" defer></script>
<script src="../dist/select.js" defer></script>
<script src="../dist/demo.js" defer></script>
</head>
<body>
<div class="testarea">
<div class="testbox">
<label>Disabled</label>
<select id="toggleDisable" class="ezmodus-select-picker" role="button" aria-hidden="false" disabled="disabled">
<option value="Alfa Romeo" role="option" aria-hidden="false" aria-label="Alfa Romeo">
Alfa Romeo
</option>
<option value="Aston Martin">Aston Martin</option>
<option value="Audi">Audi</option>
<option value="Bentley">Bentley</option>
</select>
<br />
<button class="toggle-disable" data-target="toggleDisable">Toggle disable / enable</button>
<br /><br />
<label>Single select (just a class)</label>
<select class="ezmodus-select-picker" role="button" aria-hidden="false">
<option value="Alfa Romeo" role="option" aria-hidden="false" aria-label="Alfa Romeo">
Alfa Romeo
</option>
<option value="Aston Martin">Aston Martin</option>
<option value="Audi">Audi</option>
<option value="Bentley">Bentley</option>
<option value="BMW">BMW</option>
<option value="Cadillac">Cadillac</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Dacia">Dacia</option>
<option value="Datsun">Datsun</option>
<option value="Dodge">Dodge</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Ford">Ford</option>
<option value="Lada">Lada</option>
<option value="Lamborghini">Lamborghini</option>
<option value="Land Rover">Land Rover</option>
<option value="Lexus">Lexus</option>
<option value="Lincoln">Lincoln</option>
<option value="Scania">Scania</option>
<option value="SEAT">SEAT</option>
<option value="Sisu">Sisu</option>
<option value="Škoda">Škoda</option>
<option value="Subaru">Subaru</option>
<option value="Suzuki">Suzuki</option>
</select>
<br />
<label>Single select (with size 6)</label>
<select class="ezmodus-select-picker copy-test-class" data-size="6">
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="Aston Martin">Aston Martin</option>
<option value="Audi">Audi</option>
<option value="Bentley">Bentley</option>
<option value="BMW">BMW</option>
<option value="Cadillac">Cadillac</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Dacia">Dacia</option>
<option value="Datsun">Datsun</option>
<option value="Dodge">Dodge</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Ford">Ford</option>
<option value="Lada">Lada</option>
<option value="Lamborghini">Lamborghini</option>
<option value="Land Rover">Land Rover</option>
<option value="Lexus">Lexus</option>
<option value="Lincoln">Lincoln</option>
<option value="Scania">Scania</option>
<option value="SEAT">SEAT</option>
<option value="Sisu">Sisu</option>
<option value="Škoda">Škoda</option>
<option value="Subaru">Subaru</option>
<option value="Suzuki">Suzuki</option>
</select>
</div>
<div class="testbox">
<label>Select + data-desc</label>
<select class="ezmodus-select-picker">
<option value="1" data-desc="This could be very long text to describe the very short text">
Yes
</option>
<option value="2" data-desc="Sometimes even this means Yes">No</option>
</select>
<br />
<label>Same + data-dynamic</label>
<select class="ezmodus-select-picker" data-dynamic="100">
<option value="1" data-desc="This could be very long text to describe the very short text">
Yes
</option>
<option value="2" data-desc="Sometimes even this means Yes">No</option>
</select>
<br />
<label>Same + data-dynamic (no desc)</label>
<select class="ezmodus-select-picker" data-dynamic="100">
<option value="1">
This could be very long text to describe the very short text
</option>
<option value="2">
This is little bit shorter than the first
</option>
<option value="3">
Short stuff
</option>
</select>
</div>
<div class="testbox">
<label>Select + html content</label>
<select class="ezmodus-select-picker" data-size="8" data-search="true">
<option value="1">
<strong>Alfa</strong> Romeo
</option>
<option value="2">
<span style="color: red;">Aston</span> <span class="color:lightblue;">Martin</span>
</option>
<option value="3">Audi</option>
<option value="4">Bentley</option>
<option value="5">BMW</option>
</select>
</div>
<div class="testbox">
<label>Multiple with size change 8</label>
<select class="ezmodus-select-picker" data-size="8" multiple>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="Aston Martin">Aston Martin</option>
<option value="Audi">Audi</option>
<option value="Bentley">Bentley</option>
<option value="BMW">BMW</option>
<option value="Cadillac">Cadillac</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Dacia">Dacia</option>
<option value="Datsun">Datsun</option>
<option value="Dodge">Dodge</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Ford">Ford</option>
<option value="Lada">Lada</option>
<option value="Lamborghini">Lamborghini</option>
<option value="Land Rover">Land Rover</option>
<option value="Lexus">Lexus</option>
<option value="Lincoln">Lincoln</option>
<option value="Scania">Scania</option>
<option value="SEAT">SEAT</option>
<option value="Sisu">Sisu</option>
<option value="Škoda">Škoda</option>
<option value="Subaru">Subaru</option>
<option value="Suzuki">Suzuki</option>
</select>
</div>
<div class="testbox">
<label>Multiple with size 8<br>disabled and class passing</label>
<select class="ezmodus-select-picker test-class another-class" data-size="8" multiple>
<option value="Alfa Romeo" class="option-class" selected>
Alfa Romeo (with passed class)
</option>
<option value="Aston Martin" data-desc="Disabled example" disabled>Aston Martin</option>
<option value="Audi" data-desc="Disabled example" disabled>Audi</option>
<option value="Bentley">Bentley</option>
<option value="BMW">BMW</option>
<option value="Cadillac">Cadillac</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Dacia">Dacia</option>
<option value="Datsun">Datsun</option>
<option value="Dodge">Dodge</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Ford">Ford</option>
<option value="Lada">Lada</option>
<option value="Lamborghini">Lamborghini</option>
<option value="Land Rover">Land Rover</option>
<option value="Lexus">Lexus</option>
<option value="Lincoln">Lincoln</option>
<option value="Scania">Scania</option>
<option value="SEAT">SEAT</option>
<option value="Sisu">Sisu</option>
<option value="Škoda">Škoda</option>
<option value="Subaru">Subaru</option>
<option value="Suzuki">Suzuki</option>
</select>
</div>
<div class="testbox">
<label>
Multiple with size change 6 (live search)<br>
Focus on mobile, but not on desktop
</label>
<select class="ezmodus-select-picker"
data-size="6"
data-search-focus="false"
data-search-focus-mobile="true"
data-search="true" multiple
>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="Aston Martin">Aston Martin</option>
<option value="Audi">Audi</option>
<option value="Bentley">Bentley</option>
<option value="BMW">BMW</option>
<option value="Cadillac">Cadillac</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Dacia">Dacia</option>
<option value="Datsun">Datsun</option>
<option value="Dodge">Dodge</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Ford">Ford</option>
<option value="Lada">Lada</option>
<option value="Lamborghini">Lamborghini</option>
<option value="Land Rover">Land Rover</option>
<option value="Lexus">Lexus</option>
<option value="Lincoln">Lincoln</option>
<option value="Scania">Scania</option>
<option value="SEAT">SEAT</option>
<option value="Sisu">Sisu</option>
<option value="Škoda">Škoda</option>
<option value="Subaru">Subaru</option>
<option value="Suzuki">Suzuki</option>
</select>
</div>
<div class="testbox">
<label>Multiple with size 8<br>(max 5) (full implementation)</label>
<select class="ezmodus-select-picker"
title="Choose car brands"
data-size="8"
data-search="true"
data-search-from="both"
data-search-placeholder="Find..."
data-search-no-results="No results with string '{0}'"
data-selected-text="{0} selected"
data-selected-count="3"
data-selected-max="5"
data-clear-show="true"
multiple>
<option value="Beta Juliet" data-desc="It looks nice from front">Alfa Romeo</option>
<option value="Ästen Märtin"
data-desc="James Bond likes to use these on the movies since 1950s to current year."
selected>
Aston Martin
</option>
<option value="The one" data-desc="My favourite car" selected>Audi</option>
<option value="Beetly">Bentley</option>
<option value="Bemari">BMW</option>
<option value="Kadilakki" selected>Cadillac</option>
<option value="Chevy">Chevrolet</option>
<option value="Kraisler">Chrysler</option>
<option value="Dacia">Dacia</option>
<option value="Datsun">Datsun</option>
<option value="Dodge">Dodge</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Ford">Ford</option>
<option value="All season">Lada</option>
<option value="Lambo">Lamborghini</option>
<option value="Roveri">Land Rover</option>
<option value="Lexus">Lexus</option>
<option value="Abraham">Lincoln</option>
<option value="Scania">Scania</option>
<option value="Chair">SEAT</option>
<option value="Sisu">Sisu</option>
<option value="Škoda">Škoda</option>
<option value="Suba">Subaru</option>
<option value="Jap">Suzuki</option>
</select>
</div>
<div class="testbox">
<div>Test when select is inside hidden element and size is not existing</div>
<button type="button" class="show-button" data-target="hidden-element">Show select</button>
<div id="hidden-element" class="testbox hide">
<label>Multiple with size</label>
<select class="ezmodus-select-picker"
title="Choose car brands"
data-size="4"
data-search="true"
data-clear-show="true"
data-clear-text="Clear"
data-live-search="true" multiple>
<option value="Beta Juliet">Alfa Romeo</option>
<option value="Ästen Märtin">Aston Martin</option>
<option value="The one" selected>Audi</option>
<option value="Beetly">Bentley</option>
<option value="Bemari">BMW</option>
<option value="Kadilakki" selected>Cadillac</option>
<option value="Chevy">Chevrolet</option>
<option value="Kraisler">Chrysler</option>
<option value="Dacia">Dacia</option>
<option value="Datsun">Datsun</option>
<option value="Dodge">Dodge</option>
<option value="Ferrari">Ferrari</option>
</select>
</div>
</div>
<div class="testbox">
<form>
<div>
<label>Test form reset</label>
<select class="ezmodus-select-picker" data-size="8" data-search="true">
<option value="1">
<strong>Alfa</strong> Romeo
</option>
<option value="2">
<span style="color: red;">Aston</span> <span class="color:lightblue;">Martin</span>
</option>
<option value="3" selected>Audi</option>
<option value="4">Bentley</option>
<option value="5">BMW</option>
</select>
</div>
<div>
<label>Multiple</label>
<select class="ezmodus-select-picker"
title="Choose car brands"
data-size="8"
data-search="true"
data-search-from="both"
data-search-placeholder="Find..."
data-search-no-results="No results with string '{0}'"
data-selected-text="{0} selected"
data-selected-count="3"
data-clear-show="true"
multiple>
<option value="Beta Juliet" data-desc="It looks nice from front">Alfa Romeo</option>
<option value="Ästen Märtin"
data-desc="James Bond likes to use these on the movies since 1950s to current year."
selected>
Aston Martin
</option>
<option value="The one" data-desc="My favourite car" selected>Audi</option>
<option value="Beetly">Bentley</option>
<option value="Bemari">BMW</option>
<option value="Kadilakki" selected>Cadillac</option>
<option value="Chevy">Chevrolet</option>
<option value="Kraisler" selected>Chrysler</option>
<option value="Dodge">Dodge</option>
<option value="Ferrari">Ferrari</option>
</select>
</div>
<div>
<input type="text" name="test" value="Example" />
</div>
<div>
<input type="reset" />
<button type="reset">button reset</button>
</div>
</form>
</div>
</div>
<div class="testarea">
<div class="testbox">
<label>Select with OPT GROUP - multiple</label>
<select class="ezmodus-select-picker"
title="Choose car brands"
data-size="8"
data-search="true"
data-search-from="both"
data-search-placeholder="Find..."
data-search-no-results="No results with string '{0}'"
data-selected-text="{0} selected"
data-selected-count="3"
data-selected-max="5"
data-clear-show="true"
multiple>
<optgroup>
<legend>American</legend>
<option value="Kadilakki" selected>Cadillac</option>
<option value="Chevy">Chevrolet</option>
<option value="Kraisler">Chrysler</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
<option value="Abraham">Lincoln</option>
</optgroup>
<optgroup label="British">
<option value="Beta Juliet" data-desc="It looks nice from front">Alfa Romeo</option>
<option value="Ästen Märtin"
data-desc="James Bond likes to use these on the movies since 1950s to current year."
selected>
Aston Martin
</option>
<option value="Beetly">Bentley</option>
</optgroup>
<optgroup label="German">
<option value="The one" data-desc="My favourite car" selected>Audi</option>
<option value="Bemari">BMW</option>
</optgroup>
<optgroup label="Other">
<option value="Dacia">Dacia</option>
<option value="Datsun">Datsun</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Lexus">Lexus</option>
<option value="Scania">Scania</option>
<option value="Chair">SEAT</option>
<option value="Sisu">Sisu</option>
<option value="Škoda">Škoda</option>
<option value="Suba">Subaru</option>
<option value="Jap">Suzuki</option>
</optgroup>
</select>
</div>
<div class="testbox">
<label>Select with OPT GROUP - single</label>
<select class="ezmodus-select-picker"
id="optgroup-single"
title="Choose car brands"
data-size="16"
data-search="true"
data-debug="true"
data-search-placeholder="Find..."
data-search-no-results="No results with string '{0}'"
data-clear-show="true"
>
<optgroup>
<legend>American</legend>
<option value="Cadillac">Cadillac</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
</optgroup>
<optgroup label="British">
<option value="Alfra Romeo" data-desc="It looks nice from front">Alfa Romeo</option>
<option value="Aston Martin"
data-desc="James Bond likes to use these on the movies"
selected>
Aston Martin
</option>
<option value="Beetly">Bentley</option>
<option value="Lotus">Lotus</option>
</optgroup>
<optgroup label="German">
<option value="Audi" data-desc="My favourite car">Audi</option>
<option value="BMW">BMW</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Mercedes-Benz">Mercedes-Benz</option>
<option value="Opel">Opel</option>
</optgroup>
<option value="test1">Kingston Road</option>
<option value="test2">Kingston Retail</option>
<option value="test3" selected>Kingston Avenue</option>
<option value="test4">Kingston City</option>
</select>
</div>
</div>
</body>
</html>