mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-01 13:32:23 +02:00
Loading placeholder for multiple select when using ajax
This commit is contained in:
parent
5d2f4d067d
commit
9da6b57b66
4
assets/scripts/dist/choices.min.js
vendored
4
assets/scripts/dist/choices.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -598,13 +598,20 @@ export class Choices {
|
||||||
if(this.passedElement.type === 'select-one') {
|
if(this.passedElement.type === 'select-one') {
|
||||||
const placeholderItem = this._getTemplate('item', { id: -1, value: 'Loading', label: this.config.loadingText, active: true});
|
const placeholderItem = this._getTemplate('item', { id: -1, value: 'Loading', label: this.config.loadingText, active: true});
|
||||||
this.itemList.appendChild(placeholderItem);
|
this.itemList.appendChild(placeholderItem);
|
||||||
|
} else {
|
||||||
|
this.input.placeholder = this.config.loadingText;
|
||||||
}
|
}
|
||||||
|
|
||||||
const callback = (results, value, label) => {
|
const callback = (results, value, label) => {
|
||||||
if(!isType('Array', results) || !value) return;
|
if(!isType('Array', results) || !value) return;
|
||||||
if(results && results.length) {
|
if(results && results.length) {
|
||||||
|
// Remove loading states/text
|
||||||
this.containerOuter.classList.remove(this.config.classNames.loadingState);
|
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) => {
|
results.forEach((result, index) => {
|
||||||
// Select first choice in list if single select input
|
// Select first choice in list if single select input
|
||||||
if(index === 0 && this.passedElement.type === 'select-one') {
|
if(index === 0 && this.passedElement.type === 'select-one') {
|
||||||
|
@ -1213,7 +1220,7 @@ export class Choices {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if(this.passedElement.type === 'select-one' && hasActiveDropdown) {
|
if(this.passedElement.type === 'select-one') {
|
||||||
if(target !== this.input) {
|
if(target !== this.input) {
|
||||||
this.hideDropdown();
|
this.hideDropdown();
|
||||||
}
|
}
|
||||||
|
|
|
@ -100,8 +100,8 @@
|
||||||
</optgroup>
|
</optgroup>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<label for="choices-10">Options from remote source (Fetch API)</label>
|
<label for="choices-10">Options from remote source (Fetch API) & limited to 5</label>
|
||||||
<select class="form-control" name="choices-10" id="choices-10" placeholder="Pick an Arctic Monkeys record" multiple></select>
|
<select class="form-control" name="choices-10" id="choices-10" multiple></select>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue