Skip to content

Commit dca370a

Browse files
samuelhwilliamssamuelhwilliams
committed
Allow selected options to be hidden when searching
1 parent cddbe21 commit dca370a

21 files changed

+257
-29
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Changelog
22

3+
## [Unreleased]
4+
5+
### Features
6+
- Add `searchRenderSelectedChoices` configuration option to control whether selected choices appear in search results for select-multiple inputs. Defaults to `'auto'` (backward compatible behavior). Set to `false` to hide selected choices from search results.
7+
38
## [11.2.0]
49

510
### Features

‎README.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,7 @@ import "choices.js/public/assets/styles/choices.css";
176176
prependValue: null,
177177
appendValue: null,
178178
renderSelectedChoices: 'auto',
179+
searchRenderSelectedChoices: 'auto',
179180
loadingText: 'Loading...',
180181
noResultsText: 'No results found',
181182
noChoicesText: 'No choices to choose from',
@@ -662,6 +663,23 @@ For backward compatibility, `<option value="">This is a placeholder</option>` an
662663
663664
**Usage:** Whether selected choices should be removed from the list. By default choices are removed when they are selected in multiple select box. To always render choices pass `always`.
664665
666+
### searchRenderSelectedChoices
667+
668+
**Type:** `'auto' | 'always' | Boolean` **Default:** `'auto'`
669+
670+
**Input types affected:** `select-multiple`
671+
672+
**Usage:** Whether selected choices should be removed from the list during search. By default (`'auto'`), selected choices appear in search results if they match the search query. Set to `false` to hide selected choices from search results, or `'always'` to always show them in search results.
673+
674+
**Example:**
675+
676+
```js
677+
// Hide selected choices from search results
678+
const example = new Choices(element, {
679+
searchRenderSelectedChoices: false,
680+
});
681+
```
682+
665683
### loadingText
666684
667685
**Type:** `String` **Default:** `Loading...`

‎public/assets/scripts/choices.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -995,6 +995,7 @@
995995
prependValue: null,
996996
appendValue: null,
997997
renderSelectedChoices: 'auto',
998+
searchRenderSelectedChoices: 'auto',
998999
loadingText: 'Loading...',
9991000
noResultsText: 'No results found',
10001001
noChoicesText: 'No choices to choose from',
@@ -3391,6 +3392,9 @@
33913392
if (typeof config.renderSelectedChoices !== 'boolean') {
33923393
config.renderSelectedChoices = config.renderSelectedChoices === 'always' || isSelectOne;
33933394
}
3395+
if (typeof config.searchRenderSelectedChoices !== 'boolean') {
3396+
config.searchRenderSelectedChoices = config.searchRenderSelectedChoices === 'always' || isSelectOne;
3397+
}
33943398
if (config.closeDropdownOnSelect === 'auto') {
33953399
config.closeDropdownOnSelect = isText || isSelectOne || config.singleModeForMultiSelect;
33963400
}
@@ -4040,7 +4044,10 @@
40404044
var fragment = document.createDocumentFragment();
40414045
var renderableChoices = function (choices) {
40424046
return choices.filter(function (choice) {
4043-
return !choice.placeholder && (isSearching ? !!choice.rank : config.renderSelectedChoices || !choice.selected);
4047+
return !choice.placeholder &&
4048+
(isSearching
4049+
? (config.searchRenderSelectedChoices || !choice.selected) && !!choice.rank
4050+
: config.renderSelectedChoices || !choice.selected);
40444051
});
40454052
};
40464053
var showLabel = config.appendGroupInSearch && isSearching;
@@ -4248,7 +4255,7 @@
42484255
if (!items.length || !this.config.removeItems || !this.config.removeItemButton) {
42494256
return;
42504257
}
4251-
var id = element && parseDataSetId(element.parentElement);
4258+
var id = element && parseDataSetId(element.closest('[data-id]'));
42524259
var itemToRemove = id && items.find(function (item) { return item.id === id; });
42534260
if (!itemToRemove) {
42544261
return;
@@ -4828,7 +4835,7 @@
48284835
*/
48294836
Choices.prototype._onMouseDown = function (event) {
48304837
var target = event.target;
4831-
if (!(target instanceof HTMLElement)) {
4838+
if (!(target instanceof Element)) {
48324839
return;
48334840
}
48344841
// If we have our mouse down on the scrollbar and are on IE11...

‎public/assets/scripts/choices.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/assets/scripts/choices.mjs‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -989,6 +989,7 @@ var DEFAULT_CONFIG = {
989989
prependValue: null,
990990
appendValue: null,
991991
renderSelectedChoices: 'auto',
992+
searchRenderSelectedChoices: 'auto',
992993
loadingText: 'Loading...',
993994
noResultsText: 'No results found',
994995
noChoicesText: 'No choices to choose from',
@@ -3385,6 +3386,9 @@ var Choices = /** @class */ (function () {
33853386
if (typeof config.renderSelectedChoices !== 'boolean') {
33863387
config.renderSelectedChoices = config.renderSelectedChoices === 'always' || isSelectOne;
33873388
}
3389+
if (typeof config.searchRenderSelectedChoices !== 'boolean') {
3390+
config.searchRenderSelectedChoices = config.searchRenderSelectedChoices === 'always' || isSelectOne;
3391+
}
33883392
if (config.closeDropdownOnSelect === 'auto') {
33893393
config.closeDropdownOnSelect = isText || isSelectOne || config.singleModeForMultiSelect;
33903394
}
@@ -4034,7 +4038,10 @@ var Choices = /** @class */ (function () {
40344038
var fragment = document.createDocumentFragment();
40354039
var renderableChoices = function (choices) {
40364040
return choices.filter(function (choice) {
4037-
return !choice.placeholder && (isSearching ? !!choice.rank : config.renderSelectedChoices || !choice.selected);
4041+
return !choice.placeholder &&
4042+
(isSearching
4043+
? (config.searchRenderSelectedChoices || !choice.selected) && !!choice.rank
4044+
: config.renderSelectedChoices || !choice.selected);
40384045
});
40394046
};
40404047
var showLabel = config.appendGroupInSearch && isSearching;
@@ -4242,7 +4249,7 @@ var Choices = /** @class */ (function () {
42424249
if (!items.length || !this.config.removeItems || !this.config.removeItemButton) {
42434250
return;
42444251
}
4245-
var id = element && parseDataSetId(element.parentElement);
4252+
var id = element && parseDataSetId(element.closest('[data-id]'));
42464253
var itemToRemove = id && items.find(function (item) { return item.id === id; });
42474254
if (!itemToRemove) {
42484255
return;
@@ -4822,7 +4829,7 @@ var Choices = /** @class */ (function () {
48224829
*/
48234830
Choices.prototype._onMouseDown = function (event) {
48244831
var target = event.target;
4825-
if (!(target instanceof HTMLElement)) {
4832+
if (!(target instanceof Element)) {
48264833
return;
48274834
}
48284835
// If we have our mouse down on the scrollbar and are on IE11...

‎public/assets/scripts/choices.search-basic.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -995,6 +995,7 @@
995995
prependValue: null,
996996
appendValue: null,
997997
renderSelectedChoices: 'auto',
998+
searchRenderSelectedChoices: 'auto',
998999
loadingText: 'Loading...',
9991000
noResultsText: 'No results found',
10001001
noChoicesText: 'No choices to choose from',
@@ -2912,6 +2913,9 @@
29122913
if (typeof config.renderSelectedChoices !== 'boolean') {
29132914
config.renderSelectedChoices = config.renderSelectedChoices === 'always' || isSelectOne;
29142915
}
2916+
if (typeof config.searchRenderSelectedChoices !== 'boolean') {
2917+
config.searchRenderSelectedChoices = config.searchRenderSelectedChoices === 'always' || isSelectOne;
2918+
}
29152919
if (config.closeDropdownOnSelect === 'auto') {
29162920
config.closeDropdownOnSelect = isText || isSelectOne || config.singleModeForMultiSelect;
29172921
}
@@ -3561,7 +3565,10 @@
35613565
var fragment = document.createDocumentFragment();
35623566
var renderableChoices = function (choices) {
35633567
return choices.filter(function (choice) {
3564-
return !choice.placeholder && (isSearching ? !!choice.rank : config.renderSelectedChoices || !choice.selected);
3568+
return !choice.placeholder &&
3569+
(isSearching
3570+
? (config.searchRenderSelectedChoices || !choice.selected) && !!choice.rank
3571+
: config.renderSelectedChoices || !choice.selected);
35653572
});
35663573
};
35673574
var showLabel = config.appendGroupInSearch && isSearching;
@@ -3769,7 +3776,7 @@
37693776
if (!items.length || !this.config.removeItems || !this.config.removeItemButton) {
37703777
return;
37713778
}
3772-
var id = element && parseDataSetId(element.parentElement);
3779+
var id = element && parseDataSetId(element.closest('[data-id]'));
37733780
var itemToRemove = id && items.find(function (item) { return item.id === id; });
37743781
if (!itemToRemove) {
37753782
return;
@@ -4349,7 +4356,7 @@
43494356
*/
43504357
Choices.prototype._onMouseDown = function (event) {
43514358
var target = event.target;
4352-
if (!(target instanceof HTMLElement)) {
4359+
if (!(target instanceof Element)) {
43534360
return;
43544361
}
43554362
// If we have our mouse down on the scrollbar and are on IE11...

‎public/assets/scripts/choices.search-basic.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/assets/scripts/choices.search-basic.mjs‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -989,6 +989,7 @@ var DEFAULT_CONFIG = {
989989
prependValue: null,
990990
appendValue: null,
991991
renderSelectedChoices: 'auto',
992+
searchRenderSelectedChoices: 'auto',
992993
loadingText: 'Loading...',
993994
noResultsText: 'No results found',
994995
noChoicesText: 'No choices to choose from',
@@ -2906,6 +2907,9 @@ var Choices = /** @class */ (function () {
29062907
if (typeof config.renderSelectedChoices !== 'boolean') {
29072908
config.renderSelectedChoices = config.renderSelectedChoices === 'always' || isSelectOne;
29082909
}
2910+
if (typeof config.searchRenderSelectedChoices !== 'boolean') {
2911+
config.searchRenderSelectedChoices = config.searchRenderSelectedChoices === 'always' || isSelectOne;
2912+
}
29092913
if (config.closeDropdownOnSelect === 'auto') {
29102914
config.closeDropdownOnSelect = isText || isSelectOne || config.singleModeForMultiSelect;
29112915
}
@@ -3555,7 +3559,10 @@ var Choices = /** @class */ (function () {
35553559
var fragment = document.createDocumentFragment();
35563560
var renderableChoices = function (choices) {
35573561
return choices.filter(function (choice) {
3558-
return !choice.placeholder && (isSearching ? !!choice.rank : config.renderSelectedChoices || !choice.selected);
3562+
return !choice.placeholder &&
3563+
(isSearching
3564+
? (config.searchRenderSelectedChoices || !choice.selected) && !!choice.rank
3565+
: config.renderSelectedChoices || !choice.selected);
35593566
});
35603567
};
35613568
var showLabel = config.appendGroupInSearch && isSearching;
@@ -3763,7 +3770,7 @@ var Choices = /** @class */ (function () {
37633770
if (!items.length || !this.config.removeItems || !this.config.removeItemButton) {
37643771
return;
37653772
}
3766-
var id = element && parseDataSetId(element.parentElement);
3773+
var id = element && parseDataSetId(element.closest('[data-id]'));
37673774
var itemToRemove = id && items.find(function (item) { return item.id === id; });
37683775
if (!itemToRemove) {
37693776
return;
@@ -4343,7 +4350,7 @@ var Choices = /** @class */ (function () {
43434350
*/
43444351
Choices.prototype._onMouseDown = function (event) {
43454352
var target = event.target;
4346-
if (!(target instanceof HTMLElement)) {
4353+
if (!(target instanceof Element)) {
43474354
return;
43484355
}
43494356
// If we have our mouse down on the scrollbar and are on IE11...

‎public/assets/scripts/choices.search-kmp.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -986,6 +986,7 @@
986986
prependValue: null,
987987
appendValue: null,
988988
renderSelectedChoices: 'auto',
989+
searchRenderSelectedChoices: 'auto',
989990
loadingText: 'Loading...',
990991
noResultsText: 'No results found',
991992
noChoicesText: 'No choices to choose from',
@@ -1798,6 +1799,9 @@
17981799
if (typeof config.renderSelectedChoices !== 'boolean') {
17991800
config.renderSelectedChoices = config.renderSelectedChoices === 'always' || isSelectOne;
18001801
}
1802+
if (typeof config.searchRenderSelectedChoices !== 'boolean') {
1803+
config.searchRenderSelectedChoices = config.searchRenderSelectedChoices === 'always' || isSelectOne;
1804+
}
18011805
if (config.closeDropdownOnSelect === 'auto') {
18021806
config.closeDropdownOnSelect = isText || isSelectOne || config.singleModeForMultiSelect;
18031807
}
@@ -2447,7 +2451,10 @@
24472451
var fragment = document.createDocumentFragment();
24482452
var renderableChoices = function (choices) {
24492453
return choices.filter(function (choice) {
2450-
return !choice.placeholder && (isSearching ? !!choice.rank : config.renderSelectedChoices || !choice.selected);
2454+
return !choice.placeholder &&
2455+
(isSearching
2456+
? (config.searchRenderSelectedChoices || !choice.selected) && !!choice.rank
2457+
: config.renderSelectedChoices || !choice.selected);
24512458
});
24522459
};
24532460
var showLabel = config.appendGroupInSearch && isSearching;
@@ -2655,7 +2662,7 @@
26552662
if (!items.length || !this.config.removeItems || !this.config.removeItemButton) {
26562663
return;
26572664
}
2658-
var id = element && parseDataSetId(element.parentElement);
2665+
var id = element && parseDataSetId(element.closest('[data-id]'));
26592666
var itemToRemove = id && items.find(function (item) { return item.id === id; });
26602667
if (!itemToRemove) {
26612668
return;
@@ -3235,7 +3242,7 @@
32353242
*/
32363243
Choices.prototype._onMouseDown = function (event) {
32373244
var target = event.target;
3238-
if (!(target instanceof HTMLElement)) {
3245+
if (!(target instanceof Element)) {
32393246
return;
32403247
}
32413248
// If we have our mouse down on the scrollbar and are on IE11...

‎public/assets/scripts/choices.search-kmp.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)