The constructor takes an object and renders the select.
options = {
selector: 'Unique selector',
selected: 'Selected item',
placeholder: '...',
lable: '...'
items: [string|number|object],
theme: string,
searchMode: true/false,
closeOnSelect: true/false,
nativeSelectMode: true/false,
listDisplayMode: true/false,
language: 'ru/en',
styles: {
head: {
background: '...',
},
list: {...},
chips: {...},
carriage: {...},
placeholder: {...},
lable: {..},
},
event: '...',
url: 'http/...',
multiselect: true/false,
multiselectTag: true/false,
}
Object accepting select settings.
Private Optional buttonAction Button, to control the select.
Private carriage Variable for carriage control.
Private Optional category Transferred 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.
Private element Created HTML element.
Optional event An 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 indexes Array 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 lable An optional parameter that adds a lable before the select.
Optional language Optional parameter responsible for the localization of some text elements.
Private list Created list(ul), with class list.
Optional listAn optional parameter that is responsible for the behavior of the select when opening.
Optional multiselect An 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 options Select settings passed when creating an instance of the class.
Optional placeholder Placeholder 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 selected An 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 selector Unique selector - *mandatory parameter (indicator) that is set when creating a select.
Optional styles An optional parameter that is responsible for customizing the select elements, objects with CSS properties for customizable elements are passed to it.
Optional theme An optional parameter responsible for switching between different themes, the classic theme is set by default. Can take on a value dark, white.
Optional url Required 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 close Private closePrivate displayPrivate init Private 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',
],
multiselect: true,
multiselectTag: true,
}
passed select settings.
Private initPrivate initPrivate open Private render Private renderPrivate searchPrivate selectGenerated using TypeDoc
Description
This class implements the functionality of a custom select, with customization capabilities.
Author
Ovsyanikov Maxim