131 lines
3.6 KiB
HTML
131 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<!-- polyfill for IE11 -->
|
|
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6"></script>
|
|
<script src="/select25.63904fcd.js"></script>
|
|
<script src="/countries-data.fd391f61.js"></script>
|
|
<link rel="stylesheet" href="/select25.e5b29622.css">
|
|
<link rel="stylesheet" href="/select25.63904fcd.css"><script src="/select25.e5b29622.js"></script></head>
|
|
|
|
<body>
|
|
<p>
|
|
<input type="text" value="focus grabber 1" autofocus="">
|
|
</p>
|
|
<p>
|
|
<section style="width:450px">
|
|
<input type="hidden" id="countries1">
|
|
</section>
|
|
</p>
|
|
<p>
|
|
<input type="button" id="destroy-multi" value="destroy">
|
|
</p>
|
|
<p>
|
|
<input type="text" value="focus grabber 2">
|
|
</p>
|
|
<p>
|
|
<section style="width:450px">
|
|
<input type="hidden" id="countries2">
|
|
</section>
|
|
</p>
|
|
<p>
|
|
<input type="text" value="focus grabber 3">
|
|
</p>
|
|
<p>
|
|
<label for="select1">Select Single</label>
|
|
<select id="select1">
|
|
<option>first</option>
|
|
<option>second</option>
|
|
<option selected="">third</option>
|
|
<option>fourth</option>
|
|
</select>
|
|
</p>
|
|
<p>
|
|
<label for="select2">Select Multiple</label>
|
|
<select id="select2" multiple="">
|
|
<option>first</option>
|
|
<option selected="">second</option>
|
|
<option selected="">third</option>
|
|
<option>fourth</option>
|
|
</select>
|
|
</p>
|
|
|
|
</body>
|
|
<script>var query = function () {
|
|
// local implementation of query that simulates network delay
|
|
var countries = window.select2countries;
|
|
var previousTimeout = undefined;
|
|
var previousReject = undefined;
|
|
return function (search, page, token) {
|
|
if (previousReject != undefined) {
|
|
previousReject(new Error('cancelled'));
|
|
window.clearTimeout(previousTimeout);
|
|
}
|
|
|
|
var delay = 150;
|
|
return new Promise(function (resolve, reject) {
|
|
previousReject = reject;
|
|
previousTimeout = window.setTimeout(function () {
|
|
var results = [];
|
|
var count = 0;
|
|
var limit = 10;
|
|
var offset = page * limit;
|
|
|
|
for (var i = 0; i < countries.length; i++) {
|
|
var country = countries[i];
|
|
|
|
if (country.name.toLowerCase().indexOf(search.toLowerCase()) >= 0) {
|
|
if (count >= offset) {
|
|
results.push(country);
|
|
}
|
|
|
|
count++;
|
|
|
|
if (count >= offset + limit) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
previousTimeout = undefined;
|
|
previousReject = undefined;
|
|
resolve({
|
|
values: results,
|
|
more: results.length >= limit,
|
|
token: token
|
|
});
|
|
}, delay);
|
|
});
|
|
};
|
|
}();
|
|
|
|
document.getElementById('countries1').addEventListener("change", function (event) {
|
|
console.log("onchange fired on countries1", event);
|
|
});
|
|
window.select25.create(document.getElementById('countries1'), {
|
|
valuesLabel: "Selected Countries",
|
|
comboboxLabel: "Add Country",
|
|
itemId: 'code',
|
|
itemLabel: 'name',
|
|
minimumCharacters: 2,
|
|
multiple: true,
|
|
query: query,
|
|
quiet: 100,
|
|
values: [window.select2countries[0], window.select2countries[1], window.select2countries[1]]
|
|
});
|
|
document.getElementById("destroy-multi").addEventListener("click", function () {
|
|
window.select25.destroy(document.getElementById("countries1"));
|
|
});
|
|
window.select25.create(document.getElementById('countries2'), {
|
|
allowClear: true,
|
|
placeholder: "Select Country",
|
|
itemId: 'code',
|
|
itemLabel: 'name',
|
|
minimumCharacters: 2,
|
|
query: query,
|
|
quiet: 100,
|
|
value: window.select2countries[0]
|
|
});</script>
|
|
|
|
</html> |