ChoicesJS Web Component: test page
ChoicesJS Web Component
Submit
Type
Text
Single
Multiple
Apply
Reset
Search options
Custom Styles
Items
[ "superstar", "stansmith", "gazelle", "campus", "zx500", "samba", "munchen", "eqt", "solar", "terrex" ]
Choices
[ { "value": "superstar", "label": "Superstar", "selected": false, "disabled": false }, { "value": "adizero", "label": "adizero", "selected": false, "disabled": false }, { "value": "stansmith", "label": "Stan Smith", "selected": false, "disabled": false }, { "value": "gazelle", "label": "Gazelle", "selected": false, "disabled": false }, { "value": "ultraboost", "label": "ultraboost", "selected": false, "disabled": false }, { "value": "nmd", "label": "NMD", "selected": false, "disabled": false }, { "value": "yeezy", "label": "YEEZY", "selected": false, "disabled": false }, { "value": "campus", "label": "Campus", "selected": false, "disabled": false }, { "value": "zx500", "label": "ZX 500", "selected": false, "disabled": true }, { "value": "samba", "label": "Samba", "selected": false, "disabled": false }, { "value": "predator", "label": "Predator", "selected": false, "disabled": false }, { "value": "munchen", "label": "Munchen", "selected": false, "disabled": false }, { "value": "zxflux", "label": "ZX Flux", "selected": false, "disabled": false }, { "value": "eqt", "label": "EQT", "selected": false, "disabled": false }, { "value": "solar", "label": "Solar", "selected": false, "disabled": false }, { "value": "copa", "label": "Copa", "selected": false, "disabled": true }, { "value": "terrex", "label": "Terrex", "selected": false, "disabled": false }, { "value": "pureboost", "label": "pureboost", "selected": false, "disabled": false }, { "value": "dragon", "label": "Dragon", "selected": false, "disabled": false }, { "value": "yung", "label": "YUNG", "selected": false, "disabled": false }, { "value": "deerupt", "label": "Deerupt", "selected": false, "disabled": false }, { "value": "kamanda", "label": "kamanda", "selected": false, "disabled": false } ]
Silent
Add items
Edit items
Remove items
Remove item button
Duplicate items
Paste
Search enabled
Search choices
Reset Scroll position
Should sort
Should sort items
Placeholder
Render Choice limit
Max Item count
Search floor
Search result limit
Search fields
addItemFilterFn(value) {
return /^[^\s]+$/.test(value);
}
Position
Auto
Top
Bottom
Render selected choices
Auto
Always
Delimiter
Placeholder value
Search Placeholder value
Loading text
No results text
No choices text
Item select text
Add item text
Max item text
Prepend value
Append value
callbackOnInit() {
console.info('ChoicesJS Stencil Web Component ready!');
}
callbackOnCreateTemplates(template) {
return template;
}
Templates reference
sortFn(a, b) {
return a.label.localeCompare(b.label);
}
×
Custom Styles
Class names
{ "containerOuter": "choices", "containerInner": "choices__inner", "input": "choices__input", "inputCloned": "choices__input--cloned", "list": "choices__list", "listItems": "choices__list--multiple", "listSingle": "choices__list--single", "listDropdown": "choices__list--dropdown", "item": "choices__item", "itemSelectable": "choices__item--selectable", "itemDisabled": "choices__item--disabled", "itemChoice": "choices__item--choice", "placeholder": "choices__placeholder", "group": "choices__group", "groupHeading": "choices__heading", "button": "choices__button", "activeState": "is-active", "focusState": "is-focused", "openState": "is-open", "disabledState": "is-disabled", "highlightedState": "is-highlighted", "selectedState": "is-selected", "flippedState": "is-flipped", "loadingState": "is-loading", "noResults": "has-no-results", "noChoices": "has-no-choices" }
/* Add any custom classes for the component */ /* .choices__input { font-style: italic; } */
Apply
×
Search options
See full Fuse documentation in
GitHub
.
Case sensitive
Include matches
Include score
Sort
Tokenize
Match all tokens
Find all matches
Verbose
sortFn(a, b) {
return a.score - b.score;
}
getFn(obj, path) {
var list = []; function baseToString(value) { // Exit early for strings to avoid a performance hit in some environments. if (typeof value == 'string') { return value; } var result = (value + ''); return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result; } function toString(value) { return value == null ? '' : baseToString(value); } function _get(obj, path) { if (!path) { // If there's no path left, we've gotten to the object we care about. list.push(obj); } else { var dotIndex = path.indexOf('.') var key = path; var remaining = null; if (dotIndex !== -1) { key = path.slice(0, dotIndex); remaining = path.slice(dotIndex + 1); } var value = obj[key]; if (value !== null && value !== undefined) { if (!remaining && (typeof value === 'string' || typeof value === 'number')) { list.push(toString(value)); } else if (Array.isArray(value)) { // Search each item in the array. for (var i = 0, len = value.length; i < len; i += 1) { _get(value[i], remaining); } } else if (remaining) { // An object. Recurse further. _get(value, remaining); } } } } _get(obj, path); return list;
}
ID
Keys
Token separator
/
/g
Minimum character length
Find all matches
Location
Threshold
Distance
Max pattern length
Apply
