Only add placeholder items for single select boxes

This commit is contained in:
Josh Johnson 2016-06-30 14:11:09 +01:00
parent 6a0ed866cf
commit ea2669312f
4 changed files with 14 additions and 12 deletions

View file

@ -35,7 +35,6 @@ Coming soon.
prependValue: null,
appendValue: null,
loadingText: 'Loading...',
templates: {},
classNames: {
containerOuter: 'choices',
containerInner: 'choices__inner',
@ -59,6 +58,7 @@ Coming soon.
highlightedState: 'is-highlighted',
hiddenState: 'is-hidden',
flippedState: 'is-flipped',
loadingState: 'is-loading',
},
callbackOnInit: () => {},
callbackOnAddItem: (id, value, passedInput) => {},

File diff suppressed because one or more lines are too long

View file

@ -40,7 +40,6 @@ export class Choices {
prependValue: null,
appendValue: null,
loadingText: 'Loading...',
templates: {},
classNames: {
containerOuter: 'choices',
containerInner: 'choices__inner',
@ -422,15 +421,17 @@ export class Choices {
if(this.passedElement.type === 'select-one' || this.passedElement.type === 'select-multiple') {
this.containerOuter.classList.add(this.config.classNames.loadingState);
const placeholderItem = this._getTemplate('item', { id: -1, value: 'Loading', label: this.config.loadingText, active: true});
this.itemList.appendChild(placeholderItem);
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);
}
const callback = (results, value, label) => {
if(!isType('Array', results) || !value) return;
if(results && results.length) {
this.containerOuter.classList.remove(this.config.classNames.loadingState);
this.input.placeholder = "";
// this.input.placeholder = "";
results.forEach((result, index) => {
// Select first choice in list if single select input
if(index === 0 && this.passedElement.type === 'select-one') {
@ -1191,7 +1192,8 @@ export class Choices {
},
};
this.config.templates = extend(this.config.templates, templates);
// this.config.templates = extend(this.config.templates, templates);
this.config.templates = templates;
}
/**

View file

@ -47,7 +47,7 @@
<option value="Dropdown item 2" selected>Dropdown item 2</option>
<option value="Dropdown item 3">Dropdown item 3</option>
</select>
<label for="choices-10">Option groups</label>
<select id="choices-10" name="choices-10" placeholder="This is a placeholder" multiple>
<optgroup label="UK">
@ -93,7 +93,7 @@
</select>
<label for="choices-12">Options from remote source</label>
<select name="choices-12" id="choices-12" placeholder="Pick an Arctic Monkeys record"></select>
<select name="choices-12" id="choices-12" class="choices-ajax" placeholder="Pick an Arctic Monkeys record"></select>
<label for="choices-13">Option groups</label>
<select id="choices-13" name="choices-13" placeholder="This is a placeholder">
@ -168,10 +168,10 @@
const choices7 = new Choices('#choices-7', { Search: false }).setValue(['Set value 1', 'Set value 2']);
const choicesAjax = new Choices('#choices-12').ajax((callback) => {
const choicesAjax = new Choices('.choices-ajax', { placeholder: true, placeholderValue: 'Pick an Arctic Monkeys record'}).ajax((callback) => {
fetch('https://api.discogs.com/artists/391170/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
.then((response) => {
response.json().then(function(data) {
response.json().then(function(data) {
callback(data.releases, 'title', 'title');
});
})