mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-13 03:12:41 +02:00
Merge master
This commit is contained in:
commit
df4dc82e2c
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -1,6 +1,7 @@
|
||||||
node_modules
|
node_modules
|
||||||
npm-debug.log
|
npm-debug.log
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
.vscode
|
||||||
|
|
||||||
# Test
|
# Test
|
||||||
tests/reports
|
tests/reports
|
||||||
|
|
27
README.md
27
README.md
|
@ -67,13 +67,15 @@ Or include Choices directly:
|
||||||
delimiter: ',',
|
delimiter: ',',
|
||||||
paste: true,
|
paste: true,
|
||||||
search: true,
|
search: true,
|
||||||
|
searchChoices: true,
|
||||||
searchFloor: 1,
|
searchFloor: 1,
|
||||||
|
searchFields: ['label', 'value'],
|
||||||
position: 'auto',
|
position: 'auto',
|
||||||
resetScrollPosition: true,
|
resetScrollPosition: true,
|
||||||
regexFilter: null,
|
regexFilter: null,
|
||||||
shouldSort: true,
|
shouldSort: true,
|
||||||
sortFilter: () => {...},
|
sortFilter: () => {...},
|
||||||
sortFields: ['label', 'value'],
|
placeholder: true,
|
||||||
placeholderValue: null,
|
placeholderValue: null,
|
||||||
prependValue: null,
|
prependValue: null,
|
||||||
appendValue: null,
|
appendValue: null,
|
||||||
|
@ -244,6 +246,21 @@ Pass an array of objects:
|
||||||
|
|
||||||
**Usage:** Whether a user should be allowed to search avaiable choices. Note that multiple select boxes will always show search inputs.
|
**Usage:** Whether a user should be allowed to search avaiable choices. Note that multiple select boxes will always show search inputs.
|
||||||
|
|
||||||
|
### searchChoices
|
||||||
|
**Type:** `Boolean` **Default:** `true`
|
||||||
|
|
||||||
|
**Input types affected:** `select-one`
|
||||||
|
|
||||||
|
**Usage:** Whether the plugin should filter the choices by input or not. If `false`, the search event will still emit.
|
||||||
|
|
||||||
|
|
||||||
|
### searchFields
|
||||||
|
**Type:** `Array/String` **Default:** `['label', 'value']`
|
||||||
|
|
||||||
|
**Input types affected:**`select-one`, `select-multiple`
|
||||||
|
|
||||||
|
**Usage:** Specify which fields should be used when a user is searching.
|
||||||
|
|
||||||
### searchFloor
|
### searchFloor
|
||||||
**Type:** `Number` **Default:** `1`
|
**Type:** `Number` **Default:** `1`
|
||||||
|
|
||||||
|
@ -297,12 +314,12 @@ const example = new Choices(element, {
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
### sortFields
|
### placeholder
|
||||||
**Type:** `Array/String` **Default:** `['label', 'value']`
|
**Type:** `Boolean` **Default:** `true`
|
||||||
|
|
||||||
**Input types affected:**`select-one`, `select-multiple`
|
**Input types affected:** `text`, `select-one`, `select-multiple`
|
||||||
|
|
||||||
**Usage:** Specify which fields should be used for sorting when a user is searching. If a user is not searching and sorting is enabled, only the choice's label will be sorted.
|
**Usage:** Whether the input should show a placeholder. Used in conjunction with `placeholderValue`. If `placeholder` is set to true and no value is passed to `placeholderValue`, the passed input's placeholder attribute will be used as the placeholder value.
|
||||||
|
|
||||||
### placeholderValue
|
### placeholderValue
|
||||||
**Type:** `String` **Default:** `null`
|
**Type:** `String` **Default:** `null`
|
||||||
|
|
16
assets/scripts/dist/choices.js
vendored
16
assets/scripts/dist/choices.js
vendored
|
@ -1,4 +1,4 @@
|
||||||
/*! choices.js v2.7.7 | (c) 2017 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
|
/*! choices.js v2.7.8 | (c) 2017 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
|
||||||
(function webpackUniversalModuleDefinition(root, factory) {
|
(function webpackUniversalModuleDefinition(root, factory) {
|
||||||
if(typeof exports === 'object' && typeof module === 'object')
|
if(typeof exports === 'object' && typeof module === 'object')
|
||||||
module.exports = factory();
|
module.exports = factory();
|
||||||
|
@ -124,13 +124,14 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||||
delimiter: ',',
|
delimiter: ',',
|
||||||
paste: true,
|
paste: true,
|
||||||
search: true,
|
search: true,
|
||||||
|
searchChoices: true,
|
||||||
searchFloor: 1,
|
searchFloor: 1,
|
||||||
|
searchFields: ['label', 'value'],
|
||||||
position: 'auto',
|
position: 'auto',
|
||||||
resetScrollPosition: true,
|
resetScrollPosition: true,
|
||||||
regexFilter: null,
|
regexFilter: null,
|
||||||
shouldSort: true,
|
shouldSort: true,
|
||||||
sortFilter: _utils.sortByAlpha,
|
sortFilter: _utils.sortByAlpha,
|
||||||
sortFields: ['label', 'value'],
|
|
||||||
placeholder: true,
|
placeholder: true,
|
||||||
placeholderValue: null,
|
placeholderValue: null,
|
||||||
prependValue: null,
|
prependValue: null,
|
||||||
|
@ -1045,6 +1046,9 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||||
this.input.removeAttribute('disabled');
|
this.input.removeAttribute('disabled');
|
||||||
this.containerOuter.classList.remove(this.config.classNames.disabledState);
|
this.containerOuter.classList.remove(this.config.classNames.disabledState);
|
||||||
this.containerOuter.removeAttribute('aria-disabled');
|
this.containerOuter.removeAttribute('aria-disabled');
|
||||||
|
if (this.passedElement.type === 'select-one') {
|
||||||
|
this.containerOuter.setAttribute('tabindex', '0');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
@ -1066,6 +1070,9 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||||
this.input.setAttribute('disabled', '');
|
this.input.setAttribute('disabled', '');
|
||||||
this.containerOuter.classList.add(this.config.classNames.disabledState);
|
this.containerOuter.classList.add(this.config.classNames.disabledState);
|
||||||
this.containerOuter.setAttribute('aria-disabled', 'true');
|
this.containerOuter.setAttribute('aria-disabled', 'true');
|
||||||
|
if (this.passedElement.type === 'select-one') {
|
||||||
|
this.containerOuter.setAttribute('tabindex', '-1');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
@ -1402,7 +1409,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||||
if (newValue.length >= 1 && newValue !== currentValue + ' ') {
|
if (newValue.length >= 1 && newValue !== currentValue + ' ') {
|
||||||
var haystack = this.store.getChoicesFilteredBySelectable();
|
var haystack = this.store.getChoicesFilteredBySelectable();
|
||||||
var needle = newValue;
|
var needle = newValue;
|
||||||
var keys = (0, _utils.isType)('Array', this.config.sortFields) ? this.config.sortFields : [this.config.sortFields];
|
var keys = (0, _utils.isType)('Array', this.config.searchFields) ? this.config.searchFields : [this.config.searchFields];
|
||||||
var options = Object.assign(this.config.fuseOptions, { keys: keys });
|
var options = Object.assign(this.config.fuseOptions, { keys: keys });
|
||||||
var fuse = new _fuse2.default(haystack, options);
|
var fuse = new _fuse2.default(haystack, options);
|
||||||
var results = fuse.search(needle);
|
var results = fuse.search(needle);
|
||||||
|
@ -1434,8 +1441,11 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||||
if (this.input === document.activeElement) {
|
if (this.input === document.activeElement) {
|
||||||
// Check that we have a value to search and the input was an alphanumeric character
|
// Check that we have a value to search and the input was an alphanumeric character
|
||||||
if (value && value.length > this.config.searchFloor) {
|
if (value && value.length > this.config.searchFloor) {
|
||||||
|
// Check flag to filter search input
|
||||||
|
if (this.config.searchChoices) {
|
||||||
// Filter available choices
|
// Filter available choices
|
||||||
this._searchChoices(value);
|
this._searchChoices(value);
|
||||||
|
}
|
||||||
// Trigger search event
|
// Trigger search event
|
||||||
(0, _utils.triggerEvent)(this.passedElement, 'search', {
|
(0, _utils.triggerEvent)(this.passedElement, 'search', {
|
||||||
value: value
|
value: value
|
||||||
|
|
2
assets/scripts/dist/choices.js.map
vendored
2
assets/scripts/dist/choices.js.map
vendored
File diff suppressed because one or more lines are too long
6
assets/scripts/dist/choices.min.js
vendored
6
assets/scripts/dist/choices.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -60,15 +60,16 @@ class Choices {
|
||||||
delimiter: ',',
|
delimiter: ',',
|
||||||
paste: true,
|
paste: true,
|
||||||
search: true,
|
search: true,
|
||||||
|
searchChoices: true,
|
||||||
searchFloor: 1,
|
searchFloor: 1,
|
||||||
searchPlaceholderValue: null,
|
searchPlaceholderValue: null,
|
||||||
flip: true,
|
searchFields: ['label', 'value'],
|
||||||
position: 'auto',
|
position: 'auto',
|
||||||
resetScrollPosition: true,
|
resetScrollPosition: true,
|
||||||
regexFilter: null,
|
regexFilter: null,
|
||||||
shouldSort: true,
|
shouldSort: true,
|
||||||
sortFilter: sortByAlpha,
|
sortFilter: sortByAlpha,
|
||||||
sortFields: ['label', 'value'],
|
placeholder: true,
|
||||||
placeholderValue: null,
|
placeholderValue: null,
|
||||||
prependValue: null,
|
prependValue: null,
|
||||||
appendValue: null,
|
appendValue: null,
|
||||||
|
@ -1224,7 +1225,7 @@ class Choices {
|
||||||
if (newValue.length >= 1 && newValue !== `${currentValue} `) {
|
if (newValue.length >= 1 && newValue !== `${currentValue} `) {
|
||||||
const haystack = this.store.getChoicesFilteredBySelectable();
|
const haystack = this.store.getChoicesFilteredBySelectable();
|
||||||
const needle = newValue;
|
const needle = newValue;
|
||||||
const keys = isType('Array', this.config.sortFields) ? this.config.sortFields : [this.config.sortFields];
|
const keys = isType('Array', this.config.searchFields) ? this.config.searchFields : [this.config.searchFields];
|
||||||
const options = Object.assign(this.config.fuseOptions, { keys });
|
const options = Object.assign(this.config.fuseOptions, { keys });
|
||||||
const fuse = new Fuse(haystack, options);
|
const fuse = new Fuse(haystack, options);
|
||||||
const results = fuse.search(needle);
|
const results = fuse.search(needle);
|
||||||
|
@ -1251,8 +1252,11 @@ class Choices {
|
||||||
if (this.input === document.activeElement) {
|
if (this.input === document.activeElement) {
|
||||||
// Check that we have a value to search and the input was an alphanumeric character
|
// Check that we have a value to search and the input was an alphanumeric character
|
||||||
if (value && value.length > this.config.searchFloor) {
|
if (value && value.length > this.config.searchFloor) {
|
||||||
|
// Check flag to filter search input
|
||||||
|
if (this.config.searchChoices) {
|
||||||
// Filter available choices
|
// Filter available choices
|
||||||
this._searchChoices(value);
|
this._searchChoices(value);
|
||||||
|
}
|
||||||
// Trigger search event
|
// Trigger search event
|
||||||
triggerEvent(this.passedElement, 'search', {
|
triggerEvent(this.passedElement, 'search', {
|
||||||
value,
|
value,
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "choices.js",
|
"name": "choices.js",
|
||||||
"version": "2.7.7",
|
"version": "2.7.8",
|
||||||
"description": "A vanilla JS customisable text input/select box plugin",
|
"description": "A vanilla JS customisable text input/select box plugin",
|
||||||
"main": [
|
"main": [
|
||||||
"./assets/scripts/dist/choices.js",
|
"./assets/scripts/dist/choices.js",
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
<meta name="theme-color" content="#ffffff">
|
<meta name="theme-color" content="#ffffff">
|
||||||
|
|
||||||
<!-- Ignore these -->
|
<!-- Ignore these -->
|
||||||
<link rel="stylesheet" href="assets/styles/css/base.min.css?version=2.7.7">
|
<link rel="stylesheet" href="assets/styles/css/base.min.css?version=2.7.8">
|
||||||
<!-- End ignore these -->
|
<!-- End ignore these -->
|
||||||
|
|
||||||
<!-- Optional includes -->
|
<!-- Optional includes -->
|
||||||
|
@ -23,8 +23,8 @@
|
||||||
<!-- End optional includes -->
|
<!-- End optional includes -->
|
||||||
|
|
||||||
<!-- Choices includes -->
|
<!-- Choices includes -->
|
||||||
<link rel="stylesheet" href="assets/styles/css/choices.min.css?version=2.7.7">
|
<link rel="stylesheet" href="assets/styles/css/choices.min.css?version=2.7.8">
|
||||||
<script src="assets/scripts/dist/choices.min.js?version=2.7.7"></script>
|
<script src="assets/scripts/dist/choices.min.js?version=2.7.8"></script>
|
||||||
<!-- End Choices includes -->
|
<!-- End Choices includes -->
|
||||||
|
|
||||||
<!--[if lt IE 9]>
|
<!--[if lt IE 9]>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "choices.js",
|
"name": "choices.js",
|
||||||
"version": "2.7.7",
|
"version": "2.7.8",
|
||||||
"description": "A vanilla JS customisable text input/select box plugin",
|
"description": "A vanilla JS customisable text input/select box plugin",
|
||||||
"main": "./assets/scripts/dist/choices.min.js",
|
"main": "./assets/scripts/dist/choices.min.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
|
@ -77,11 +77,10 @@ describe('Choices', () => {
|
||||||
expect(this.choices.config.search).toEqual(jasmine.any(Boolean));
|
expect(this.choices.config.search).toEqual(jasmine.any(Boolean));
|
||||||
expect(this.choices.config.searchFloor).toEqual(jasmine.any(Number));
|
expect(this.choices.config.searchFloor).toEqual(jasmine.any(Number));
|
||||||
expect(this.choices.config.searchPlaceholderValue).toEqual(null);
|
expect(this.choices.config.searchPlaceholderValue).toEqual(null);
|
||||||
expect(this.choices.config.flip).toEqual(jasmine.any(Boolean));
|
expect(this.choices.config.searchFields).toEqual(jasmine.any(Array) || jasmine.any(String));
|
||||||
expect(this.choices.config.position).toEqual(jasmine.any(String));
|
expect(this.choices.config.position).toEqual(jasmine.any(String));
|
||||||
expect(this.choices.config.regexFilter).toEqual(null);
|
expect(this.choices.config.regexFilter).toEqual(null);
|
||||||
expect(this.choices.config.sortFilter).toEqual(jasmine.any(Function));
|
expect(this.choices.config.sortFilter).toEqual(jasmine.any(Function));
|
||||||
expect(this.choices.config.sortFields).toEqual(jasmine.any(Array) || jasmine.any(String));
|
|
||||||
expect(this.choices.config.shouldSort).toEqual(jasmine.any(Boolean));
|
expect(this.choices.config.shouldSort).toEqual(jasmine.any(Boolean));
|
||||||
expect(this.choices.config.placeholderValue).toEqual(null);
|
expect(this.choices.config.placeholderValue).toEqual(null);
|
||||||
expect(this.choices.config.prependValue).toEqual(null);
|
expect(this.choices.config.prependValue).toEqual(null);
|
||||||
|
@ -441,7 +440,7 @@ describe('Choices', () => {
|
||||||
passedElement.addEventListener('search', searchSpy);
|
passedElement.addEventListener('search', searchSpy);
|
||||||
|
|
||||||
this.choices.input.focus();
|
this.choices.input.focus();
|
||||||
this.choices.input.value = 'Value 3';
|
this.choices.input.value = '3 ';
|
||||||
|
|
||||||
// Key down to search
|
// Key down to search
|
||||||
this.choices._onKeyUp({
|
this.choices._onKeyUp({
|
||||||
|
@ -450,9 +449,41 @@ describe('Choices', () => {
|
||||||
ctrlKey: false
|
ctrlKey: false
|
||||||
});
|
});
|
||||||
|
|
||||||
const mostAccurateResult = this.choices.currentState.choices[0];
|
const mostAccurateResult = this.choices.currentState.choices.filter(function (choice) {
|
||||||
|
return choice.active;
|
||||||
|
});
|
||||||
|
|
||||||
expect(this.choices.isSearching && mostAccurateResult.value === 'Value 3').toBeTruthy;
|
expect(this.choices.isSearching && mostAccurateResult[0].value === 'Value 3').toBe(true);
|
||||||
|
expect(searchSpy).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shouldn\'t filter choices when searching', function() {
|
||||||
|
this.choices = new Choices(this.input, {
|
||||||
|
searchChoices: false
|
||||||
|
});
|
||||||
|
|
||||||
|
this.choices.setValue(['Javascript', 'HTML', 'Jasmine']);
|
||||||
|
|
||||||
|
const searchSpy = jasmine.createSpy('searchSpy');
|
||||||
|
const passedElement = this.choices.passedElement;
|
||||||
|
|
||||||
|
passedElement.addEventListener('search', searchSpy);
|
||||||
|
|
||||||
|
this.choices.input.focus();
|
||||||
|
this.choices.input.value = 'Javascript';
|
||||||
|
|
||||||
|
// Key down to search
|
||||||
|
this.choices._onKeyUp({
|
||||||
|
target: this.choices.input,
|
||||||
|
keyCode: 13,
|
||||||
|
ctrlKey: false
|
||||||
|
});
|
||||||
|
|
||||||
|
const activeOptions = this.choices.currentState.choices.filter(function (choice) {
|
||||||
|
return choice.active;
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(activeOptions.length).toEqual(this.choices.currentState.choices.length);
|
||||||
expect(searchSpy).toHaveBeenCalled();
|
expect(searchSpy).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue