The constructor takes an object and renders the select.
options = {
selector: 'Unique selector',
selected: 'Selected item',
placeholder: '...',
lable: '...'
items: [string|number|object],
darkTheme: true/false,
searchMode: true/false,
closeOnSelect: true/false,
nativeSelectMode: true/false,
listDisplayMode: true/false,
language: 'ru/en',
styles: {
head: {
background: '...',
},
list: {...},
chips: {...},
caret: {...},
placeholder: {...},
lable: {..},
},
event: '...',
url: 'http/...',
multiselect: true/false,
multiselectTag: true/false,
}
Object accepting select settings.
Private Optional btnButton, to control the select.
Private caretVariable for carriage control.
Private Optional categoryTransferred categories.
Optional closeAn optional parameter that is responsible for the behavior of the select when opening, if closeOnSelect: false, then when an element is selected in the selector, closing does not occur, and you can select another element by default, closeOnSelect:true.
Optional darkAn optional parameter that is responsible for enabling a light / dark theme by default, the dark theme is set (darkTheme == true).
Private elementCreated HTML element.
Optional eventAn optional parameter that is responsible for the behavior of the select, passing to this parameter an event of the 'mouseenter' type, select will open on hover.
Private indexesArray of indexes of selected elements.
Optional items*Required parameter (if no other way to get data (url) is specified), this is an array of elements, which will be displayed in the select when selected.
Optional lableAn optional parameter that adds a lable before the select.
Optional languageOptional parameter responsible for the localization of some text elements.
Private listCreated list(ul), with class list.
Optional listAn optional parameter that is responsible for the behavior of the select when opening.
Optional multiselectAn optional parameter, which is responsible for the behavior of the select, adds the ability to select multiple elements. Selected elements are rendered as plain text, separated by commas.
Optional multiselectAn optional parameter that is responsible for the behavior of the select, for him, *** works only in a place with a multiselect connection.
Optional nativeAn optional parameter that is responsible for the behavior of the select when opened on mobile devices.
Private optionsSelect settings passed when creating an instance of the class.
Optional placeholderPlaceholder optional parameter to which the text of the select placeholder is passed.
Private randomUnique Id for elements.
Optional searchAn optional parameter that adds a live search on the select elements.
Optional selectedAn optional parameter, which is passed the element that will be selected initially in the select.
Private selectedSelected or an array of selected items from a list.
Optional selectorUnique selector - *mandatory parameter (indicator) that is set when creating a select.
Optional stylesAn optional parameter that is responsible for customizing the select elements, objects with CSS properties for customizable elements are passed to it.
Optional urlRequired parameter (if no other way to get data (items) is specified), data that comes from the backend in the format { id: "", title: "", value: ""}.
Returns the indices of the selected element(s) as an array / empty array.
A getter that returns the indexes of the selected element(s) of the select.
Returns the selected element(s) as an array / element / null.
Getter returning the selected element(s) of the select.
a method that allows you to change the placeholder in the search and the text that is displayed if there is no result.
addLanguage
the object in which the fields for connecting the language are located has two mandatory fields placeholder, textInListSearch, selectPlaceholder.
Private addPrivate checkPrivate closePrivate closePrivate displayPrivate initPrivate
Private method for initializing an instance of the ICgSelect class.
init
Private method. General initialization of the select. Obtaining tinctures and converting select elements.
{
selector: '.cg-dropdown_one',
placeholder: 'Choose a car',
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'max',
],
darkTheme: true,
multiselect: true,
multiselectTag: true,
}
passed select settings.
Private initPrivate initPrivate openPrivate renderPrivate renderPrivate searchPrivate selectGenerated using TypeDoc
Description
This class implements the functionality of a custom select, with customization capabilities.
Author
Ovsyanikov Maxim