mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-29 10:50:03 +02:00
Only clear choices if select input
This commit is contained in:
parent
1de237de85
commit
b6fcefb4a5
|
@ -1128,10 +1128,12 @@ export default class Choices {
|
||||||
if (this.config.callbackOnItemSearch) {
|
if (this.config.callbackOnItemSearch) {
|
||||||
const callback = this.config.callbackOnItemSearch;
|
const callback = this.config.callbackOnItemSearch;
|
||||||
if (isType('Function', callback)) {
|
if (isType('Function', callback)) {
|
||||||
|
if(this.passedElement.type !== 'text') {
|
||||||
// Reset choices
|
// Reset choices
|
||||||
this._clearChoices();
|
this._clearChoices();
|
||||||
// Reset loading state/text
|
// Reset loading state/text
|
||||||
this._handleLoadingState();
|
this._handleLoadingState();
|
||||||
|
}
|
||||||
// Run callback
|
// Run callback
|
||||||
callback(value, this._getAjaxCallback(), this.passedElement);
|
callback(value, this._getAjaxCallback(), this.passedElement);
|
||||||
} else {
|
} else {
|
||||||
|
@ -1953,11 +1955,9 @@ export default class Choices {
|
||||||
const classNames = this.config.classNames;
|
const classNames = this.config.classNames;
|
||||||
const templates = {
|
const templates = {
|
||||||
containerOuter: (direction) => {
|
containerOuter: (direction) => {
|
||||||
return strToEl(
|
return strToEl(`
|
||||||
`
|
|
||||||
<div class="${classNames.containerOuter}" data-type="${this.passedElement.type}" ${this.passedElement.type === 'select-one' ? 'tabindex="0"' : ''} aria-haspopup="true" aria-expanded="false" dir="${direction}"></div>
|
<div class="${classNames.containerOuter}" data-type="${this.passedElement.type}" ${this.passedElement.type === 'select-one' ? 'tabindex="0"' : ''} aria-haspopup="true" aria-expanded="false" dir="${direction}"></div>
|
||||||
`
|
`);
|
||||||
);
|
|
||||||
},
|
},
|
||||||
containerInner: () => {
|
containerInner: () => {
|
||||||
return strToEl(`
|
return strToEl(`
|
||||||
|
@ -1965,11 +1965,9 @@ export default class Choices {
|
||||||
`);
|
`);
|
||||||
},
|
},
|
||||||
itemList: () => {
|
itemList: () => {
|
||||||
return strToEl(
|
return strToEl(`
|
||||||
`
|
|
||||||
<div class="${classNames.list} ${this.passedElement.type === 'select-one' ? classNames.listSingle : classNames.listItems}"></div>
|
<div class="${classNames.list} ${this.passedElement.type === 'select-one' ? classNames.listSingle : classNames.listItems}"></div>
|
||||||
`
|
`);
|
||||||
);
|
|
||||||
},
|
},
|
||||||
placeholder: (value) => {
|
placeholder: (value) => {
|
||||||
return strToEl(`
|
return strToEl(`
|
||||||
|
@ -1978,57 +1976,44 @@ export default class Choices {
|
||||||
},
|
},
|
||||||
item: (data) => {
|
item: (data) => {
|
||||||
if (this.config.removeItemButton) {
|
if (this.config.removeItemButton) {
|
||||||
return strToEl(
|
return strToEl(`
|
||||||
`
|
|
||||||
<div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : ''} ${!data.disabled ? classNames.itemSelectable : ''}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''} data-deletable>
|
<div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : ''} ${!data.disabled ? classNames.itemSelectable : ''}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''} data-deletable>
|
||||||
${data.label}<button class="${classNames.button}" data-button>Remove item</button>
|
${data.label}<button class="${classNames.button}" data-button>Remove item</button>
|
||||||
</div>
|
</div>
|
||||||
`
|
`);
|
||||||
);
|
|
||||||
}
|
}
|
||||||
return strToEl(
|
return strToEl(`
|
||||||
`
|
|
||||||
<div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
|
<div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
|
||||||
${data.label}
|
${data.label}
|
||||||
</div>
|
</div>
|
||||||
`
|
`);
|
||||||
);
|
|
||||||
},
|
},
|
||||||
choiceList: () => {
|
choiceList: () => {
|
||||||
return strToEl(
|
return strToEl(`
|
||||||
`
|
|
||||||
<div class="${classNames.list}" dir="ltr" role="listbox" ${this.passedElement.type !== 'select-one' ? 'aria-multiselectable="true"' : ''}></div>
|
<div class="${classNames.list}" dir="ltr" role="listbox" ${this.passedElement.type !== 'select-one' ? 'aria-multiselectable="true"' : ''}></div>
|
||||||
`
|
`);
|
||||||
);
|
|
||||||
},
|
},
|
||||||
choiceGroup: (data) => {
|
choiceGroup: (data) => {
|
||||||
return strToEl(
|
return strToEl(`
|
||||||
`
|
|
||||||
<div class="${classNames.group} ${data.disabled ? classNames.itemDisabled : ''}" data-group data-id="${data.id}" data-value="${data.value}" role="group" ${data.disabled ? 'aria-disabled="true"' : ''}>
|
<div class="${classNames.group} ${data.disabled ? classNames.itemDisabled : ''}" data-group data-id="${data.id}" data-value="${data.value}" role="group" ${data.disabled ? 'aria-disabled="true"' : ''}>
|
||||||
<div class="${classNames.groupHeading}">${data.value}</div>
|
<div class="${classNames.groupHeading}">${data.value}</div>
|
||||||
</div>
|
</div>
|
||||||
`
|
`);
|
||||||
);
|
|
||||||
},
|
},
|
||||||
choice: (data) => {
|
choice: (data) => {
|
||||||
return strToEl(
|
return strToEl(`
|
||||||
`
|
|
||||||
<div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
|
<div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
|
||||||
${data.label}
|
${data.label}
|
||||||
</div>
|
</div>
|
||||||
`
|
`);
|
||||||
);
|
|
||||||
},
|
},
|
||||||
input: () => {
|
input: () => {
|
||||||
return strToEl(
|
return strToEl(`
|
||||||
`
|
|
||||||
<input type="text" class="${classNames.input} ${classNames.inputCloned}" autocomplete="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list">
|
<input type="text" class="${classNames.input} ${classNames.inputCloned}" autocomplete="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list">
|
||||||
`
|
`);
|
||||||
);
|
|
||||||
},
|
},
|
||||||
dropdown: () => {
|
dropdown: () => {
|
||||||
return strToEl(
|
return strToEl(`
|
||||||
`
|
|
||||||
<div class="${classNames.list} ${classNames.listDropdown}" aria-expanded="false"></div>
|
<div class="${classNames.list} ${classNames.listDropdown}" aria-expanded="false"></div>
|
||||||
`);
|
`);
|
||||||
},
|
},
|
||||||
|
|
|
@ -140,6 +140,7 @@
|
||||||
<select class="form-control" name="choices-single-remote-fetch" id="choices-single-remote-fetch" placeholder="Pick an Arctic Monkeys record"></select>
|
<select class="form-control" name="choices-single-remote-fetch" id="choices-single-remote-fetch" placeholder="Pick an Arctic Monkeys record"></select>
|
||||||
|
|
||||||
<label for="choices-single-remove-xhr">Options from remote source (XHR) & remove button</label>
|
<label for="choices-single-remove-xhr">Options from remote source (XHR) & remove button</label>
|
||||||
|
<p><small>If this doesn't work, the Discogs rate limit has probably been reached. Try again later!</small></p>
|
||||||
<select class="form-control" name="choices-single-remove-xhr" id="choices-single-remove-xhr" placeholder="Pick a Smiths record"></select>
|
<select class="form-control" name="choices-single-remove-xhr" id="choices-single-remove-xhr" placeholder="Pick a Smiths record"></select>
|
||||||
|
|
||||||
<label for="choices-single-groups">Option groups</label>
|
<label for="choices-single-groups">Option groups</label>
|
||||||
|
@ -335,7 +336,7 @@
|
||||||
removeItemButton: true,
|
removeItemButton: true,
|
||||||
callbackOnItemSearch: function (value, fn, passedInput) {
|
callbackOnItemSearch: function (value, fn, passedInput) {
|
||||||
var request = new XMLHttpRequest();
|
var request = new XMLHttpRequest();
|
||||||
var url = 'https://api.discogs.com/database/search?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW&q=' + value;
|
var url = 'https://api.discogs.com/database/search?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW&type=artist?q=' + value;
|
||||||
request.open('get', url, true);
|
request.open('get', url, true);
|
||||||
request.onreadystatechange = function() {
|
request.onreadystatechange = function() {
|
||||||
var status;
|
var status;
|
||||||
|
|
Loading…
Reference in a new issue