deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-17 21:16:34 +02:00
Code Issues Projects Releases Wiki Activity

Loading placeholder for multiple select when using ajax

Browse source
This commit is contained in:
Josh Johnson 2016-08-14 16:19:09 +01:00
parent 5d2f4d067d
commit 9da6b57b66
3 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/scripts/dist/choices.min.js vendored
View file

File diff suppressed because one or more lines are too long

13
assets/scripts/src/choices.js
View file

@ -598,13 +598,20 @@ export class Choices {
if(this.passedElement.type === 'select-one') {
const placeholderItem = this._getTemplate('item', { id: -1, value: 'Loading', label: this.config.loadingText, active: true});
this.itemList.appendChild(placeholderItem);
} else {
this.input.placeholder = this.config.loadingText;
}
const callback = (results, value, label) => {
if(!isType('Array', results) || !value) return;
if(results && results.length) {
// Remove loading states/text
this.containerOuter.classList.remove(this.config.classNames.loadingState);
const filter = this.config.sortFilter;
if(this.passedElement.type === 'select-multiple') {
this.input.placeholder = this.config.placeholderValue || this.passedElement.getAttribute('placeholder');
}
// Add each result as a choice
results.forEach((result, index) => {
// Select first choice in list if single select input
if(index === 0 && this.passedElement.type === 'select-one') {
@ -1213,7 +1220,7 @@ export class Choices {
}
}
} else {
if(this.passedElement.type === 'select-one' && hasActiveDropdown) {
if(this.passedElement.type === 'select-one') {
if(target !== this.input) {
this.hideDropdown();
}

4
index.html
View file

@ -100,8 +100,8 @@
</optgroup>
</select>
<label for="choices-10">Options from remote source (Fetch API)</label>
<select class="form-control" name="choices-10" id="choices-10" placeholder="Pick an Arctic Monkeys record" multiple></select>
<label for="choices-10">Options from remote source (Fetch API) &amp; limited to 5</label>
<select class="form-control" name="choices-10" id="choices-10" multiple></select>
<hr>