mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-20 14:36:34 +02:00
searchPlaceholderValue option
This commit is contained in:
parent
55e81d188b
commit
84f149ee83
|
@ -358,7 +358,7 @@ const example = new Choices(element, {
|
||||||
### placeholder
|
### placeholder
|
||||||
**Type:** `Boolean` **Default:** `true`
|
**Type:** `Boolean` **Default:** `true`
|
||||||
|
|
||||||
**Input types affected:** `text`, `select-one`, `select-multiple`
|
**Input types affected:** `text`, `select-multiple`
|
||||||
|
|
||||||
**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.
|
**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.
|
||||||
|
|
||||||
|
@ -369,6 +369,13 @@ const example = new Choices(element, {
|
||||||
|
|
||||||
**Usage:** The value of the inputs placeholder.
|
**Usage:** The value of the inputs placeholder.
|
||||||
|
|
||||||
|
### selectPlaceholderValue
|
||||||
|
**Type:** `String` **Default:** `null`
|
||||||
|
|
||||||
|
**Input types affected:** `select-one`
|
||||||
|
|
||||||
|
**Usage:** The value of the search inputs placeholder.
|
||||||
|
|
||||||
### prependValue
|
### prependValue
|
||||||
**Type:** `String` **Default:** `null`
|
**Type:** `String` **Default:** `null`
|
||||||
|
|
||||||
|
|
|
@ -75,6 +75,7 @@ class Choices {
|
||||||
sortFilter: sortByAlpha,
|
sortFilter: sortByAlpha,
|
||||||
placeholder: true,
|
placeholder: true,
|
||||||
placeholderValue: null,
|
placeholderValue: null,
|
||||||
|
searchPlaceholderValue: null,
|
||||||
prependValue: null,
|
prependValue: null,
|
||||||
appendValue: null,
|
appendValue: null,
|
||||||
renderSelectedChoices: 'auto',
|
renderSelectedChoices: 'auto',
|
||||||
|
@ -1124,8 +1125,11 @@ class Choices {
|
||||||
this._triggerChange(itemToRemove.value);
|
this._triggerChange(itemToRemove.value);
|
||||||
|
|
||||||
if (this.isSelectOneElement) {
|
if (this.isSelectOneElement) {
|
||||||
const placeholder = this.config.placeholder ? this.config.placeholderValue || this.passedElement.getAttribute('placeholder') :
|
const placeholder = this.config.placeholder ?
|
||||||
|
this.config.placeholderValue ||
|
||||||
|
this.passedElement.getAttribute('placeholder') :
|
||||||
false;
|
false;
|
||||||
|
|
||||||
if (placeholder) {
|
if (placeholder) {
|
||||||
const placeholderItem = this._getTemplate('placeholder', placeholder);
|
const placeholderItem = this._getTemplate('placeholder', placeholder);
|
||||||
this.itemList.appendChild(placeholderItem);
|
this.itemList.appendChild(placeholderItem);
|
||||||
|
@ -2346,15 +2350,11 @@ class Choices {
|
||||||
);
|
);
|
||||||
|
|
||||||
groupChoices.forEach((option) => {
|
groupChoices.forEach((option) => {
|
||||||
const isOptDisabled = option.disabled ||
|
const isOptDisabled = option.disabled || (option.parentNode && option.parentNode.disabled);
|
||||||
(option.parentNode && option.parentNode.disabled);
|
|
||||||
let label = isType('Object', option) ?
|
|
||||||
option[labelKey] :
|
|
||||||
option.innerHTML;
|
|
||||||
|
|
||||||
this._addChoice(
|
this._addChoice(
|
||||||
option[valueKey],
|
option[valueKey],
|
||||||
label,
|
(isType('Object', option)) ? option[labelKey] : option.innerHTML,
|
||||||
option.selected,
|
option.selected,
|
||||||
isOptDisabled,
|
isOptDisabled,
|
||||||
groupId,
|
groupId,
|
||||||
|
@ -2690,11 +2690,11 @@ class Choices {
|
||||||
wrap(containerInner, containerOuter);
|
wrap(containerInner, containerOuter);
|
||||||
|
|
||||||
// If placeholder has been enabled and we have a value
|
// If placeholder has been enabled and we have a value
|
||||||
if (placeholder) {
|
if (this.isSelectOneElement) {
|
||||||
|
input.placeholder = this.config.searchPlaceholderValue || '';
|
||||||
|
} else if (placeholder) {
|
||||||
input.placeholder = placeholder;
|
input.placeholder = placeholder;
|
||||||
if (!this.isSelectOneElement) {
|
input.style.width = getWidthOfInput(input);
|
||||||
input.style.width = getWidthOfInput(input);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!this.config.addItems) {
|
if (!this.config.addItems) {
|
||||||
|
@ -2752,28 +2752,17 @@ class Choices {
|
||||||
allChoices.forEach((choice, index) => {
|
allChoices.forEach((choice, index) => {
|
||||||
// Pre-select first choice if it's a single select
|
// Pre-select first choice if it's a single select
|
||||||
if (this.isSelectOneElement) {
|
if (this.isSelectOneElement) {
|
||||||
if (hasSelectedChoice || (!hasSelectedChoice && index > 0)) {
|
// If there is a selected choice already or the choice is not
|
||||||
// If there is a selected choice already or the choice is not
|
// the first in the array, add each choice normally
|
||||||
// the first in the array, add each choice normally
|
// Otherwise pre-select the first choice in the array
|
||||||
this._addChoice(
|
this._addChoice(
|
||||||
choice.value,
|
choice.value,
|
||||||
choice.label,
|
choice.label,
|
||||||
choice.selected,
|
(hasSelectedChoice || index > 0) ? choice.selected : true,
|
||||||
choice.disabled,
|
(hasSelectedChoice || index > 0) ? choice.disabled : false,
|
||||||
undefined,
|
undefined,
|
||||||
choice.customProperties
|
choice.customProperties
|
||||||
);
|
);
|
||||||
} else {
|
|
||||||
// Otherwise pre-select the first choice in the array
|
|
||||||
this._addChoice(
|
|
||||||
choice.value,
|
|
||||||
choice.label,
|
|
||||||
true,
|
|
||||||
false,
|
|
||||||
undefined,
|
|
||||||
choice.customProperties
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
this._addChoice(
|
this._addChoice(
|
||||||
choice.value,
|
choice.value,
|
||||||
|
|
|
@ -157,7 +157,6 @@
|
||||||
<h2>Single select input</h2>
|
<h2>Single select input</h2>
|
||||||
<label for="choices-single-default">Default</label>
|
<label for="choices-single-default">Default</label>
|
||||||
<select class="form-control" data-trigger name="choices-single-default" id="choices-single-default" placeholder="This is a search placeholder">
|
<select class="form-control" data-trigger name="choices-single-default" id="choices-single-default" placeholder="This is a search placeholder">
|
||||||
<option selected disabled>This is a placeholder</option>
|
|
||||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
<option value="Dropdown item 1">Dropdown item 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Dropdown item 2">Dropdown item 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Dropdown item 3">Dropdown item 3</option>
|
||||||
|
@ -413,7 +412,8 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
var genericExamples = new Choices('[data-trigger]', {
|
var genericExamples = new Choices('[data-trigger]', {
|
||||||
placeholderValue: 'This is a placeholder set in the config'
|
placeholderValue: 'This is a placeholder set in the config',
|
||||||
|
searchPlaceholderValue: 'This is a search placeholder'
|
||||||
});
|
});
|
||||||
|
|
||||||
var singleNoSearch = new Choices('#choices-single-no-search', {
|
var singleNoSearch = new Choices('#choices-single-no-search', {
|
||||||
|
|
|
@ -69,6 +69,7 @@ describe('Choices', () => {
|
||||||
expect(this.choices.config.shouldSortItems).toEqual(jasmine.any(Boolean));
|
expect(this.choices.config.shouldSortItems).toEqual(jasmine.any(Boolean));
|
||||||
expect(this.choices.config.placeholder).toEqual(jasmine.any(Boolean));
|
expect(this.choices.config.placeholder).toEqual(jasmine.any(Boolean));
|
||||||
expect(this.choices.config.placeholderValue).toEqual(null);
|
expect(this.choices.config.placeholderValue).toEqual(null);
|
||||||
|
expect(this.choices.config.searchPlaceholderValue).toEqual(null);
|
||||||
expect(this.choices.config.prependValue).toEqual(null);
|
expect(this.choices.config.prependValue).toEqual(null);
|
||||||
expect(this.choices.config.appendValue).toEqual(null);
|
expect(this.choices.config.appendValue).toEqual(null);
|
||||||
expect(this.choices.config.renderSelectedChoices).toEqual(jasmine.any(String));
|
expect(this.choices.config.renderSelectedChoices).toEqual(jasmine.any(String));
|
||||||
|
@ -170,6 +171,16 @@ describe('Choices', () => {
|
||||||
this.choices.destroy();
|
this.choices.destroy();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should apply placeholderValue to input', function() {
|
||||||
|
this.choices = new Choices(this.input);
|
||||||
|
expect(this.choices.input.placeholder).toEqual('Placeholder text');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not apply searchPlaceholderValue to input', function() {
|
||||||
|
this.choices = new Choices(this.input);
|
||||||
|
expect(this.choices.input.placeholder).not.toEqual('Test');
|
||||||
|
});
|
||||||
|
|
||||||
it('should accept a user inputted value', function() {
|
it('should accept a user inputted value', function() {
|
||||||
this.choices = new Choices(this.input);
|
this.choices = new Choices(this.input);
|
||||||
|
|
||||||
|
@ -282,6 +293,22 @@ describe('Choices', () => {
|
||||||
this.choices.destroy();
|
this.choices.destroy();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should not apply placeholderValue to input', function() {
|
||||||
|
this.choices = new Choices(this.input, {
|
||||||
|
placeholderValue: 'Placeholder'
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(this.choices.input.placeholder).not.toEqual('Placeholder');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should apply searchPlaceholderValue to input', function() {
|
||||||
|
this.choices = new Choices(this.input, {
|
||||||
|
searchPlaceholderValue: 'Placeholder'
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(this.choices.input.placeholder).toEqual('Placeholder');
|
||||||
|
});
|
||||||
|
|
||||||
it('should open the choice list on focusing', function() {
|
it('should open the choice list on focusing', function() {
|
||||||
this.choices = new Choices(this.input);
|
this.choices = new Choices(this.input);
|
||||||
this.choices.input.focus();
|
this.choices.input.focus();
|
||||||
|
@ -590,6 +617,7 @@ describe('Choices', () => {
|
||||||
|
|
||||||
this.choices = new Choices(this.input, {
|
this.choices = new Choices(this.input, {
|
||||||
placeholderValue: 'Placeholder text',
|
placeholderValue: 'Placeholder text',
|
||||||
|
searchPlaceholderValue: 'Test',
|
||||||
choices: [{
|
choices: [{
|
||||||
value: 'One',
|
value: 'One',
|
||||||
label: 'Label One',
|
label: 'Label One',
|
||||||
|
@ -610,6 +638,14 @@ describe('Choices', () => {
|
||||||
this.choices.destroy();
|
this.choices.destroy();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should apply placeholderValue to input', function() {
|
||||||
|
expect(this.choices.input.placeholder).toEqual('Placeholder text');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not apply searchPlaceholderValue to input', function() {
|
||||||
|
expect(this.choices.input.placeholder).not.toEqual('Test');
|
||||||
|
});
|
||||||
|
|
||||||
it('should add any pre-defined values', function() {
|
it('should add any pre-defined values', function() {
|
||||||
expect(this.choices.currentState.items.length).toBeGreaterThan(1);
|
expect(this.choices.currentState.items.length).toBeGreaterThan(1);
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue