2019-06-26 01:23:14 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<!-- polyfill for IE11 -->
|
|
|
|
|
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6"></script>
|
|
|
|
|
<script src="../bridge/src/select25.tsx"></script>
|
|
|
|
|
<script src="countries-data.js"></script>
|
|
|
|
|
<link rel="stylesheet" href="../control/src/select25.scss" />
|
|
|
|
|
</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>
|
2019-06-27 06:17:57 +03:00
|
|
|
<section>
|
2019-06-27 09:12:18 +03:00
|
|
|
<input type="hidden" id="colors" data-s25-container-style="width:450px" />
|
2019-06-27 06:17:57 +03:00
|
|
|
</section>
|
|
|
|
|
|
2019-06-26 01:23:14 +03:00
|
|
|
<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>
|
2019-06-28 02:48:13 +03:00
|
|
|
|
|
|
|
|
function countryToDataItem(c) {
|
|
|
|
|
return {id:c.code, text:c.name};
|
|
|
|
|
}
|
|
|
|
|
|
2019-06-26 01:23:14 +03:00
|
|
|
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({
|
2019-06-28 02:48:13 +03:00
|
|
|
values: results.map(countryToDataItem),
|
2019-06-26 01:23:14 +03:00
|
|
|
more: results.length >= limit,
|
|
|
|
|
token: token
|
|
|
|
|
});
|
|
|
|
|
}, delay);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
})();
|
|
|
|
|
|
|
|
|
|
document.getElementById('countries1').addEventListener("change", function (event) {
|
|
|
|
|
console.log("onchange fired on countries1", event);
|
|
|
|
|
})
|
|
|
|
|
|
2019-06-28 02:48:13 +03:00
|
|
|
window.select25.createMultiSelect(
|
2019-06-26 01:23:14 +03:00
|
|
|
document.getElementById('countries1'), {
|
|
|
|
|
valuesLabel: "Selected Countries",
|
|
|
|
|
comboboxLabel: "Add Country",
|
|
|
|
|
minimumCharacters: 2,
|
|
|
|
|
query: query,
|
|
|
|
|
quiet: 100,
|
2019-06-28 02:48:13 +03:00
|
|
|
values: [window.select2countries[0], window.select2countries[1], window.select2countries[1]].map(countryToDataItem),
|
2019-06-26 01:23:14 +03:00
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
document.getElementById("destroy-multi").addEventListener("click", function () {
|
|
|
|
|
window.select25.destroy(document.getElementById("countries1"));
|
|
|
|
|
});
|
|
|
|
|
|
2019-06-28 02:48:13 +03:00
|
|
|
window.select25.createSingleSelect(
|
2019-06-26 01:23:14 +03:00
|
|
|
document.getElementById('countries2'), {
|
|
|
|
|
allowClear: true,
|
|
|
|
|
placeholder: "Select Country",
|
|
|
|
|
minimumCharacters: 2,
|
|
|
|
|
query: query,
|
|
|
|
|
quiet: 100,
|
|
|
|
|
|
2019-06-28 02:48:13 +03:00
|
|
|
value: countryToDataItem(window.select2countries[0])
|
2019-06-26 01:23:14 +03:00
|
|
|
},
|
|
|
|
|
);
|
2019-06-27 06:17:57 +03:00
|
|
|
|
2019-06-28 02:48:13 +03:00
|
|
|
window.select25.createMultiSelect(
|
2019-06-27 06:17:57 +03:00
|
|
|
document.getElementById("colors"), {
|
|
|
|
|
minimumCharacters: 0,
|
|
|
|
|
data: function (params) {
|
|
|
|
|
var term = params.term ? params.term.trim() : "";
|
|
|
|
|
var colors = ["Red", "Green", "Blue"];
|
|
|
|
|
|
|
|
|
|
if (term.length > 0) {
|
|
|
|
|
var contains = colors.findIndex(c => c.toUpperCase() === term.toUpperCase());
|
|
|
|
|
if (contains < 0) {
|
|
|
|
|
colors.splice(0, 0, term);
|
|
|
|
|
} else {
|
|
|
|
|
// move matched element to the top so its selected
|
|
|
|
|
var color = colors.splice(contains, 1);
|
|
|
|
|
colors.splice(0, 0, color[0]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
more: false,
|
|
|
|
|
values: colors.map(c => {
|
|
|
|
|
return {
|
|
|
|
|
id: c.toUpperCase(),
|
|
|
|
|
text: c
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
)
|
2019-06-26 01:23:14 +03:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</html>
|
