Add option to remove search filter choices but emit the search event.

This commit is contained in:
Manuel Madeira 2017-04-06 14:42:11 +01:00
parent c1327c9f55
commit 7ec1e5310c
7 changed files with 90 additions and 38 deletions

1
.gitignore vendored
View file

@ -1,6 +1,7 @@
node_modules
npm-debug.log
.DS_Store
.vscode
# Test
tests/reports

View file

@ -67,6 +67,7 @@ Or include Choices directly:
delimiter: ',',
paste: true,
search: true,
searchChoices: true,
searchFloor: 1,
position: 'auto',
resetScrollPosition: true,
@ -245,6 +246,13 @@ 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.
### 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 be emited.
### searchFloor
**Type:** `Number` **Default:** `1`

View file

@ -124,6 +124,7 @@ return /******/ (function(modules) { // webpackBootstrap
delimiter: ',',
paste: true,
search: true,
searchChoices: true,
searchFloor: 1,
position: 'auto',
resetScrollPosition: true,
@ -1045,6 +1046,9 @@ return /******/ (function(modules) { // webpackBootstrap
this.input.removeAttribute('disabled');
this.containerOuter.classList.remove(this.config.classNames.disabledState);
this.containerOuter.removeAttribute('aria-disabled');
if (this.passedElement.type === 'select-one') {
this.containerOuter.setAttribute('tabindex', '0');
}
}
return this;
}
@ -1066,6 +1070,9 @@ return /******/ (function(modules) { // webpackBootstrap
this.input.setAttribute('disabled', '');
this.containerOuter.classList.add(this.config.classNames.disabledState);
this.containerOuter.setAttribute('aria-disabled', 'true');
if (this.passedElement.type === 'select-one') {
this.containerOuter.setAttribute('tabindex', '-1');
}
}
return this;
}
@ -1434,8 +1441,11 @@ return /******/ (function(modules) { // webpackBootstrap
if (this.input === document.activeElement) {
// Check that we have a value to search and the input was an alphanumeric character
if (value && value.length > this.config.searchFloor) {
// Check flag to filter search input
if (this.config.searchChoices) {
// Filter available choices
this._searchChoices(value);
}
// Trigger search event
(0, _utils.triggerEvent)(this.passedElement, 'search', {
value: value
@ -2679,10 +2689,7 @@ return /******/ (function(modules) { // webpackBootstrap
* @param {!Object<string, *>} options
*/
function Fuse (list, options) {
var i
var len
var key
var keys
this.list = list
this.options = options = options || {}
@ -2701,7 +2708,7 @@ return /******/ (function(modules) { // webpackBootstrap
}
}
Fuse.VERSION = '2.6.0'
Fuse.VERSION = '2.6.2'
/**
* Sets a new list for Fuse to match against.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -60,6 +60,7 @@ class Choices {
delimiter: ',',
paste: true,
search: true,
searchChoices: true,
searchFloor: 1,
position: 'auto',
resetScrollPosition: true,
@ -1225,8 +1226,11 @@ class Choices {
if (this.input === document.activeElement) {
// Check that we have a value to search and the input was an alphanumeric character
if (value && value.length > this.config.searchFloor) {
// Check flag to filter search input
if (this.config.searchChoices) {
// Filter available choices
this._searchChoices(value);
}
// Trigger search event
triggerEvent(this.passedElement, 'search', {
value,

View file

@ -441,7 +441,7 @@ it('should trigger hideDropdown on dropdown closing', function() {
passedElement.addEventListener('search', searchSpy);
this.choices.input.focus();
this.choices.input.value = 'Value 3';
this.choices.input.value = '3 ';
// Key down to search
this.choices._onKeyUp({
@ -450,9 +450,41 @@ it('should trigger hideDropdown on dropdown closing', function() {
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();
});