diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3fa8776..288aac9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -85,3 +85,9 @@ Tested in JS and React. Errors in work in React applications are revealed.
- Optimized code.
- Added error messages when using public methods.
+
+### 04.10.2023 - update 0.3.2
+
+- Added the ability to set the name attribute for further sending data to the server. (\*nameSelect: string)
+- Added a function to POST a request to the server when selecting an item. (\*getRequestUrl: string)
+- Optimized code.
diff --git a/README.md b/README.md
index 5bc489c..c4378fd 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# CG-SELECT
-## version ~ 0.3.12
+## version ~ 0.3.2
ЧИТАТЬ НА РУССКОМ
@@ -30,6 +30,7 @@ npm i cg-select
```
```
+
#### PHP
Repository: PHP cg-select package integration
@@ -156,8 +157,6 @@ All documentation on CG-SELECT is located in the folder of the same name. The do
Documentation
-
-
## Contributing
1. Fork it!
diff --git a/READMERU.md b/READMERU.md
index 3eb83bb..bb90924 100644
--- a/READMERU.md
+++ b/READMERU.md
@@ -1,6 +1,6 @@
# CG-SELECT
-## Версия ~ 0.3.12
+## Версия ~ 0.3.2
English README
diff --git a/package-lock.json b/package-lock.json
index 99c8b3d..38bd0fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "cg-select",
- "version": "0.3.12",
+ "version": "0.3.2",
"lockfileVersion": 2,
"requires": true,
"packages": {
diff --git a/package.json b/package.json
index 563a601..502fe1f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "cg-select",
- "version": "0.3.12",
+ "version": "0.3.2",
"source": "index.js",
"main": "dist/main.js",
"description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
diff --git a/src/cg-select.ts b/src/cg-select.ts
index eec9fb0..f3c2562 100644
--- a/src/cg-select.ts
+++ b/src/cg-select.ts
@@ -46,6 +46,8 @@ export default class CGSelect implements ICgSelect {
label?: string;
styles?: IStyle;
event?: string;
+ nameSelect?: string;
+ getRequestUrl?: string;
url?: string;
multiselect?: boolean;
multiselectTag?: boolean;
@@ -95,6 +97,11 @@ export default class CGSelect implements ICgSelect {
* @type {Element | null}
*/
private buttonAction?: Element | null;
+ /**
+ * Array for request
+ * @type {IItems}
+ */
+ private forUrlSelectedItems: IItems[] = [];
/**
* @param {ICgSelect} setting Object accepting select settings.
@@ -113,6 +120,8 @@ export default class CGSelect implements ICgSelect {
nativeSelectMode: true/false,
listDisplayMode: true/false,
language: 'ru/en',
+ nameSelect: "titleYouSelect";
+ getRequestUrl: "/endpoint/123";
styles: {
head: {
background: '...',
@@ -197,6 +206,8 @@ export default class CGSelect implements ICgSelect {
styles,
label,
event,
+ nameSelect,
+ getRequestUrl,
selected,
placeholder,
theme,
@@ -216,6 +227,8 @@ export default class CGSelect implements ICgSelect {
this.styles = styles;
this.label = label;
this.event = event;
+ this.nameSelect = nameSelect;
+ this.getRequestUrl = getRequestUrl;
this.selected = selected;
this.placeholder = placeholder;
this.theme = theme;
@@ -283,7 +296,7 @@ export default class CGSelect implements ICgSelect {
}
const ulList = document.createElement('ul');
- const nativeSelect = createNativeSelect();
+ const nativeSelect = createNativeSelect(this.nameSelect);
let inputSearch: HTMLInputElement;
let textNode: Text;
@@ -384,7 +397,7 @@ export default class CGSelect implements ICgSelect {
const response = await fetch(this.url!);
const dataUrl = await response.json();
- const nativeSelect = createNativeSelect();
+ const nativeSelect = createNativeSelect(this.nameSelect!);
dataUrl.forEach((dataItem: IItems, index: number) => {
const item = {
@@ -613,6 +626,17 @@ export default class CGSelect implements ICgSelect {
select!.innerText = this.selectedItems.join(',');
}
}
+
+ if (this.getRequestUrl!) {
+ this.forUrlSelectedItems.push(item);
+ fetch(this.getRequestUrl, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json;charset=utf-8',
+ },
+ body: JSON.stringify(this.forUrlSelectedItems),
+ });
+ }
} else {
if (this.multiselectTag) {
const tagItem = document.getElementById(`tag-${index}-${item.id}`);
@@ -622,6 +646,17 @@ export default class CGSelect implements ICgSelect {
if (Array.isArray(this.selectedItems)) {
this.selectedItems.splice(checkIndex, 1);
this.indexes.splice(checkIndex, 1);
+
+ if (this.getRequestUrl! && this.forUrlSelectedItems.length > 0) {
+ this.forUrlSelectedItems.splice(checkIndex, 1);
+ fetch(this.getRequestUrl, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json;charset=utf-8',
+ },
+ body: JSON.stringify(this.forUrlSelectedItems),
+ });
+ }
nativeOptionMultiple(nativeOption, item.title, false);
}
}
@@ -648,6 +683,16 @@ export default class CGSelect implements ICgSelect {
option.classList.remove('active');
});
option.classList.add('active');
+
+ if (this.getRequestUrl!) {
+ fetch(this.getRequestUrl, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json;charset=utf-8',
+ },
+ body: JSON.stringify(item),
+ });
+ }
}
clearSelect(select!, this.element!, selectedItemsClear);
diff --git a/src/components/create-element/create-element.ts b/src/components/create-element/create-element.ts
index ca37746..02893dd 100644
--- a/src/components/create-element/create-element.ts
+++ b/src/components/create-element/create-element.ts
@@ -5,10 +5,14 @@ import { ICreateBreadCrumb } from './create-element.interface';
* The method that creates the native select.
* @returns {HTMLSelectElement} Returns the created native select.
*/
-export function createNativeSelect(): HTMLSelectElement {
+export function createNativeSelect(nameSelect: string | undefined): HTMLSelectElement {
const nativeSelect = document.createElement('select');
- nativeSelect.setAttribute('name', 'dataSelect');
+ if (nameSelect == undefined) {
+ nativeSelect.setAttribute('name', 'CgSelect');
+ } else {
+ nativeSelect.setAttribute('name', nameSelect!);
+ }
nativeSelect.classList.add('nativeSelect');
return nativeSelect;
}
diff --git a/src/interfaces/cg-select.interface.ts b/src/interfaces/cg-select.interface.ts
index cb3b24f..e1b98a2 100644
--- a/src/interfaces/cg-select.interface.ts
+++ b/src/interfaces/cg-select.interface.ts
@@ -75,6 +75,18 @@ export interface ICgSelect {
* @type {string}
*/
event?: string;
+
+ /**
+ * Optional parameter responsible for the native select attribute.
+ * @type {string}
+ */
+ nameSelect?: string;
+
+ /**
+ * Optional parameter responsible for the sending address when selected in the select.
+ * @type {string}
+ */
+ getRequestUrl?: string;
/**
* Required parameter (if no other way to get data (items) is specified),
* data that comes from the backend in the format { id: "", title: "", value: ""}.