mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-21 06:56:34 +02:00
Ability to specify options via config
This commit is contained in:
Josh Johnson
parent
400a70e5cb
commit
064d12400b
24
README.md
24
README.md
|
|
@ -67,6 +67,13 @@ A lightweight, configurable select box/text input plugin. Similar to Select2 and
|
|||
flippedState: 'is-flipped',
|
||||
loadingState: 'is-loading',
|
||||
},
|
||||
sortFunction: (a, b) => {
|
||||
const labelA = (a.label || a.value).toLowerCase();
|
||||
const labelB = (b.label || b.value).toLowerCase();
|
||||
if (labelA < labelB) return -1;
|
||||
if (labelA > labelB) return 1;
|
||||
return 0;
|
||||
},
|
||||
callbackOnInit: () => {},
|
||||
callbackOnAddItem: (id, value, passedInput) => {},
|
||||
callbackOnRemoveItem: (id, value, passedInput) => {},
|
||||
|
|
@ -279,6 +286,23 @@ classNames: {
|
|||
|
||||
<strong>Usage:</strong> Classes added to HTML generated by Choices. By default classnames follow the [BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) notation.
|
||||
|
||||
### sortFunction
|
||||
<strong>Type:</strong> `Function` <strong>Default:</strong>
|
||||
|
||||
```js
|
||||
(a, b) => {
|
||||
const labelA = (a.label || a.value).toLowerCase();
|
||||
const labelB = (b.label || b.value).toLowerCase();
|
||||
if (labelA < labelB) return -1;
|
||||
if (labelA > labelB) return 1;
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
<strong>Input types affected:</strong> `select-one`, `select-multiple`
|
||||
|
||||
<strong>Usage:</strong> Function to sort options and groups. By default options and groups are sorted alphabetically.
|
||||
|
||||
### callbackOnInit
|
||||
<strong>Type:</strong> `Function` <strong>Default:</strong>`() => {}`
|
||||
|
||||
|
|
|
|||
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
|
|
@ -1308,25 +1308,26 @@ export class Choices {
|
|||
renderGroups(groups, choices, fragment) {
|
||||
const groupFragment = fragment || document.createDocumentFragment();
|
||||
|
||||
groups.forEach((group, i) => {
|
||||
// Grab options that are children of this group
|
||||
const groupChoices = choices.filter((choice) => {
|
||||
if(this.passedElement.type === 'select-one') {
|
||||
return choice.groupId === group.id
|
||||
} else {
|
||||
return choice.groupId === group.id && !choice.selected;
|
||||
groups
|
||||
.forEach((group, i) => {
|
||||
// Grab options that are children of this group
|
||||
const groupChoices = choices.filter((choice) => {
|
||||
if(this.passedElement.type === 'select-one') {
|
||||
return choice.groupId === group.id
|
||||
} else {
|
||||
return choice.groupId === group.id && !choice.selected;
|
||||
}
|
||||
});
|
||||
|
||||
if(groupChoices.length >= 1) {
|
||||
const dropdownGroup = this._getTemplate('choiceGroup', group);
|
||||
|
||||
groupFragment.appendChild(dropdownGroup);
|
||||
|
||||
this.renderChoices(groupChoices, groupFragment);
|
||||
}
|
||||
});
|
||||
|
||||
if(groupChoices.length >= 1) {
|
||||
const dropdownGroup = this._getTemplate('choiceGroup', group);
|
||||
|
||||
groupFragment.appendChild(dropdownGroup);
|
||||
|
||||
this.renderChoices(groupChoices, groupFragment);
|
||||
}
|
||||
});
|
||||
|
||||
return groupFragment;
|
||||
}
|
||||
|
||||
|
|
@ -1341,15 +1342,16 @@ export class Choices {
|
|||
// Create a fragment to store our list items (so we don't have to update the DOM for each item)
|
||||
const choicesFragment = fragment || document.createDocumentFragment();
|
||||
|
||||
choices.forEach((choice, i) => {
|
||||
const dropdownItem = this._getTemplate('choice', choice);
|
||||
choices
|
||||
.forEach((choice, i) => {
|
||||
const dropdownItem = this._getTemplate('choice', choice);
|
||||
|
||||
if(this.passedElement.type === 'select-one') {
|
||||
choicesFragment.appendChild(dropdownItem);
|
||||
} else if(!choice.selected) {
|
||||
choicesFragment.appendChild(dropdownItem);
|
||||
}
|
||||
});
|
||||
if(this.passedElement.type === 'select-one') {
|
||||
choicesFragment.appendChild(dropdownItem);
|
||||
} else if(!choice.selected) {
|
||||
choicesFragment.appendChild(dropdownItem);
|
||||
}
|
||||
});
|
||||
|
||||
return choicesFragment;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -466,8 +466,8 @@ export const getWidthOfInput = (input) => {
|
|||
};
|
||||
|
||||
export const sortByAlpha = (a, b) => {
|
||||
const labelA = a.label.toLowerCase();
|
||||
const labelB = b.label.toLowerCase();
|
||||
const labelA = (a.label || a.value).toLowerCase();
|
||||
const labelB = (b.label || b.value).toLowerCase();
|
||||
|
||||
if (labelA < labelB) return -1;
|
||||
if (labelA > labelB) return 1;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { sortByAlpha } from './../lib/utils.js';
|
||||
|
||||
const groups = (state = [], action) => {
|
||||
switch (action.type) {
|
||||
case 'ADD_GROUP':
|
||||
|
|
@ -6,7 +8,7 @@ const groups = (state = [], action) => {
|
|||
value: action.value,
|
||||
active: action.active,
|
||||
disabled: action.disabled,
|
||||
}];
|
||||
}].sort(sortByAlpha);;
|
||||
|
||||
default:
|
||||
return state;
|
||||
|
|
|
|||
153
index.html
153
index.html
|
|
@ -11,7 +11,7 @@
|
|||
<body>
|
||||
<div class="container">
|
||||
<div class="section">
|
||||
<!-- <h1>Choices</h1>
|
||||
<h1>Choices</h1>
|
||||
<p>A lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.</p>
|
||||
<h2>Text inputs</h2>
|
||||
<label for="choices-1">Limited to 5</label>
|
||||
|
|
@ -135,99 +135,100 @@
|
|||
</select>
|
||||
|
||||
<label for="choices-14">Countries remote source</label>
|
||||
<select name="choices-14" id="choices-14" placeholder="Pick a country"></select> -->
|
||||
<select name="choices-14" id="choices-14" placeholder="Pick a country"></select>
|
||||
|
||||
<select name="choices-bug" id="choices-bug" placeholder="This is a placeholder">
|
||||
<label for="choices-15">Options added via config</label>
|
||||
<select name="choices-15" id="choices-15" placeholder="This is a placeholder">
|
||||
<option value="0">Zero</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// const choices1 = new Choices(document.getElementById('choices-1'), {
|
||||
// delimiter: ',',
|
||||
// editItems: true,
|
||||
// maxItemCount: 5,
|
||||
// removeItemButton: true
|
||||
// });
|
||||
const choices1 = new Choices(document.getElementById('choices-1'), {
|
||||
delimiter: ',',
|
||||
editItems: true,
|
||||
maxItemCount: 5,
|
||||
removeItemButton: true
|
||||
});
|
||||
|
||||
// const choices2 = new Choices('#choices-2', {
|
||||
// paste: false,
|
||||
// duplicateItems: false,
|
||||
// editItems: true,
|
||||
// });
|
||||
const choices2 = new Choices('#choices-2', {
|
||||
paste: false,
|
||||
duplicateItems: false,
|
||||
editItems: true,
|
||||
});
|
||||
|
||||
// const choices3 = new Choices('#choices-3', {
|
||||
// duplicates: false,
|
||||
// editItems: true,
|
||||
// regexFilter: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
|
||||
// });
|
||||
const choices3 = new Choices('#choices-3', {
|
||||
duplicates: false,
|
||||
editItems: true,
|
||||
regexFilter: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
|
||||
});
|
||||
|
||||
// const choices4 = new Choices('#choices-4', {
|
||||
// addItems: false,
|
||||
// removeItems: false,
|
||||
// }).disable();
|
||||
const choices4 = new Choices('#choices-4', {
|
||||
addItems: false,
|
||||
removeItems: false,
|
||||
}).disable();
|
||||
|
||||
// const choices5 = new Choices('#choices-5', {
|
||||
// prependValue: 'item-',
|
||||
// appendValue: `-${Date.now()}`,
|
||||
// }).removeActiveItems();
|
||||
const choices5 = new Choices('#choices-5', {
|
||||
prependValue: 'item-',
|
||||
appendValue: `-${Date.now()}`,
|
||||
}).removeActiveItems();
|
||||
|
||||
// const choices6 = new Choices('#choices-6', {
|
||||
// items: ['josh@joshuajohnson.co.uk', { value: 'joe@bloggs.co.uk', label: 'Joe Bloggs' } ],
|
||||
// });
|
||||
const choices6 = new Choices('#choices-6', {
|
||||
items: ['josh@joshuajohnson.co.uk', { value: 'joe@bloggs.co.uk', label: 'Joe Bloggs' } ],
|
||||
});
|
||||
|
||||
// const choices7 = new Choices('#choices-7', { search: false }).setValue(['Set value 1', 'Set value 2']);
|
||||
const choices7 = new Choices('#choices-7', { search: false }).setValue(['Set value 1', 'Set value 2']);
|
||||
|
||||
// const choices10 = new Choices('#choices-10', {
|
||||
// placeholder: true,
|
||||
// placeholderValue: 'Pick an Strokes record',
|
||||
// callbackOnRender: (state) => console.log(state)
|
||||
// }).ajax((callback) => {
|
||||
// fetch('https://api.discogs.com/artists/55980/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
|
||||
// .then((response) => {
|
||||
// response.json().then(function(data) {
|
||||
// callback(data.releases, 'title', 'title');
|
||||
// });
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.log(error);
|
||||
// });
|
||||
// });
|
||||
const choices10 = new Choices('#choices-10', {
|
||||
placeholder: true,
|
||||
placeholderValue: 'Pick an Strokes record',
|
||||
// callbackOnRender: (state) => console.log(state)
|
||||
}).ajax((callback) => {
|
||||
fetch('https://api.discogs.com/artists/55980/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
|
||||
.then((response) => {
|
||||
response.json().then(function(data) {
|
||||
callback(data.releases, 'title', 'title');
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
});
|
||||
|
||||
// const choices12 = new Choices('#choices-12', {
|
||||
// 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((data) => {
|
||||
// callback(data.releases, 'title', 'title');
|
||||
// });
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.log(error);
|
||||
// });
|
||||
// });
|
||||
const choices12 = new Choices('#choices-12', {
|
||||
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((data) => {
|
||||
callback(data.releases, 'title', 'title');
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
});
|
||||
|
||||
// const choices14 = new Choices('#choices-14').ajax((callback) => {
|
||||
// fetch('https://restcountries.eu/rest/v1/all')
|
||||
// .then((response) => {
|
||||
// response.json().then((data) => {
|
||||
// callback(data, 'alpha2Code', 'name');
|
||||
// });
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.log(error);
|
||||
// });
|
||||
// });
|
||||
const choices14 = new Choices('#choices-14').ajax((callback) => {
|
||||
fetch('https://restcountries.eu/rest/v1/all')
|
||||
.then((response) => {
|
||||
response.json().then((data) => {
|
||||
callback(data, 'alpha2Code', 'name');
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
});
|
||||
|
||||
// const choicesMultiple = new Choices('[data-choice]', {
|
||||
// placeholderValue: 'This is a placeholder set in the config',
|
||||
// removeButton: true
|
||||
// });
|
||||
const choicesMultiple = new Choices('[data-choice]', {
|
||||
placeholderValue: 'This is a placeholder set in the config',
|
||||
removeButton: true
|
||||
});
|
||||
|
||||
const choicesBug = new Choices('#choices-bug', {
|
||||
const choicesBug = new Choices('#choices-15', {
|
||||
options: [
|
||||
{value: 'One', label: 'Label One', selected: true, disabled: false},
|
||||
{value: 'Two', label: 'Label Two'},
|
||||
|
|
|
|||
Loading…
Reference in a new issue