mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-16 12:45:10 +02:00
Added custom properties to options
Added custom properties to options to be searchable on select.
This commit is contained in:
parent
caed692440
commit
71a3131d3c
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "choices.js",
|
||||
"version": "5.0.0",
|
||||
"version": "5.1.0",
|
||||
"description": "A vanilla JS customisable text input/select box plugin",
|
||||
"main": "./public/assets/scripts/choices.min.js",
|
||||
"types": "./types/index.d.ts",
|
||||
|
|
File diff suppressed because it is too large
Load diff
26
public/assets/scripts/choices.min.js
vendored
26
public/assets/scripts/choices.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -16,7 +16,7 @@
|
|||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<!-- Ignore these -->
|
||||
<link rel="stylesheet" href="assets/styles/base.min.css?version=5.0.0">
|
||||
<link rel="stylesheet" href="assets/styles/base.min.css?version=5.1.0">
|
||||
<!-- End ignore these -->
|
||||
|
||||
<!-- Optional includes -->
|
||||
|
@ -24,8 +24,8 @@
|
|||
<!-- End optional includes -->
|
||||
|
||||
<!-- Choices includes -->
|
||||
<link rel="stylesheet" href="assets/styles/choices.min.css?version=5.0.0">
|
||||
<script src="assets/scripts/choices.min.js?version=5.0.0"></script>
|
||||
<link rel="stylesheet" href="assets/styles/choices.min.css?version=5.1.0">
|
||||
<script src="assets/scripts/choices.min.js?version=5.1.0"></script>
|
||||
<!-- End Choices includes -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
|
@ -229,6 +229,14 @@
|
|||
<p><small>Try searching for 'fantastic'</small></p>
|
||||
<select class="form-control" name="choices-single-selected-option" id="choices-single-selected-option" placeholder="This is a placeholder"></select>
|
||||
|
||||
<label for="choices-with-custom-props-via-html">Option searchable by custom properties via <code>data-custom-properties</code> attribute</label>
|
||||
<p><small>Try searching for 'fantastic', again</small>
|
||||
<select class="form-control" id="choices-with-custom-props-via-html">
|
||||
<option value="Dropdown item 1">Label One</option>
|
||||
<option value="Dropdown item 2" selected disabled>Label Two</option>
|
||||
<option value="Dropdown item 3" data-custom-properties='This option is fantastic'>Label Three</option>
|
||||
</select>
|
||||
|
||||
<label for="choices-single-no-sorting">Options without sorting</label>
|
||||
<select class="form-control" name="choices-single-no-sorting" id="choices-single-no-sorting" placeholder="This is a placeholder">
|
||||
<option value="Madrid">Madrid</option>
|
||||
|
@ -496,6 +504,10 @@
|
|||
],
|
||||
}).setChoiceByValue('Two');
|
||||
|
||||
var customChoicesPropertiesViaDataAttributes = new Choices('#choices-with-custom-props-via-html', {
|
||||
searchFields: ['label', 'value', 'customProperties']
|
||||
})
|
||||
|
||||
var singleNoSorting = new Choices('#choices-single-no-sorting', {
|
||||
shouldSort: false,
|
||||
});
|
||||
|
|
|
@ -1919,13 +1919,12 @@ class Choices {
|
|||
selected: o.selected,
|
||||
disabled: o.disabled || o.parentNode.disabled,
|
||||
placeholder: o.hasAttribute('placeholder'),
|
||||
customProperties: o.getAttribute('data-custom-properties'),
|
||||
});
|
||||
});
|
||||
|
||||
// If sorting is enabled or the user is searching, filter choices
|
||||
if (this.config.shouldSort) {
|
||||
allChoices.sort(filter);
|
||||
}
|
||||
if (this.config.shouldSort) allChoices.sort(filter);
|
||||
|
||||
// Determine whether there is a selected choice
|
||||
const hasSelectedChoice = allChoices.some(choice => choice.selected);
|
||||
|
|
|
@ -78,6 +78,7 @@ export const TEMPLATES = {
|
|||
data-item
|
||||
data-id="${data.id}"
|
||||
data-value="${data.value}"
|
||||
data-custom-properties='${data.customProperties}'
|
||||
data-deletable
|
||||
${ariaSelected}
|
||||
${ariaDisabled}
|
||||
|
@ -225,6 +226,10 @@ export const TEMPLATES = {
|
|||
return strToEl(`
|
||||
<option value="${data.value}" ${data.active ? 'selected' : ''} ${
|
||||
data.disabled ? 'disabled' : ''
|
||||
} ${
|
||||
data.customProperties
|
||||
? `data-custom-properties=${data.customProperties}`
|
||||
: ''
|
||||
}>${data.label}</option>
|
||||
`);
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue