mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-10 09:36:35 +02:00
Add option to remove search filter choices but emit the search event.
This commit is contained in:
parent
c1327c9f55
commit
7ec1e5310c
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -1,6 +1,7 @@
|
|||
node_modules
|
||||
npm-debug.log
|
||||
.DS_Store
|
||||
.vscode
|
||||
|
||||
# Test
|
||||
tests/reports
|
||||
|
|
|
@ -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`
|
||||
|
||||
|
|
15
assets/scripts/dist/choices.js
vendored
15
assets/scripts/dist/choices.js
vendored
|
@ -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.
|
||||
|
|
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
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
|
@ -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,
|
||||
|
|
|
@ -406,7 +406,7 @@ describe('Choices', () => {
|
|||
expect(showDropdownSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should trigger hideDropdown on dropdown closing', function() {
|
||||
it('should trigger hideDropdown on dropdown closing', function() {
|
||||
this.choices = new Choices(this.input);
|
||||
const container = this.choices.containerOuter;
|
||||
|
||||
|
@ -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();
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in a new issue