Added Combobox
d6cdb4239d8dbb120efdabf768c52dfea43a4033
3 files changed
WebFormBuilder/formConfigData.jsonWebFormBuilder/wwwroot/script.jsWebFormBuilder/wwwroot/styles.css
diff --git a/WebFormBuilder/formConfigData.json b/WebFormBuilder/formConfigData.json
index 8f6faf1..7e4d34d 100644
--- a/WebFormBuilder/formConfigData.json
+++ b/WebFormBuilder/formConfigData.json
@@ -5,7 +5,7 @@
"Label": "UserName",
"Placeholder": "Enter your username",
"Tooltip": "This will be your unique identifier.",
- "Properties": [ "autocomplete=username" , "required=yes" ],
+ "Properties": [ "autocomplete=username", "required=yes" ],
"Value": "JohnDoe"
},
{
@@ -25,6 +25,13 @@
"Tooltip": "Use a strong password with at least 8 characters.",
"Value": "0ldP@ssW0rd!"
},
+ {
+ "Type": "Combobox",
+ "Name": "Fruit",
+ "Label": "Fruit",
+ "Tooltip": "Select your fruit or make new one.",
+ "Options": [ "Appletje", "Banana", "Cherry", "Date", "Fig", "Grape", "Honeydew" ]
+ },
{
"Type": "Radio",
"Name": "gender",
@@ -71,7 +78,7 @@
"Label": "Age",
"Placeholder": "Enter your age",
"Tooltip": "Provide your age in years.",
- "Properties": ["min=18", "max=120", "step=1"],
+ "Properties": [ "min=18", "max=120", "step=1" ],
"Value": "30"
},
{
@@ -160,7 +167,7 @@
"Type": "Button",
"Name": "custom_button",
"Label": "Custom Button",
- "Value": "Do not press me",
+ "Value": "Do not press me",
"Tooltip": "Click this button for custom action."
},
{
diff --git a/WebFormBuilder/wwwroot/script.js b/WebFormBuilder/wwwroot/script.js
index 9206fc2..cf541b2 100644
--- a/WebFormBuilder/wwwroot/script.js
+++ b/WebFormBuilder/wwwroot/script.js
@@ -123,6 +123,9 @@ function generateField(field, wrapper)
case "select":
element = createSelectField(field);
break;
+ case "combobox":
+ element = createComboboxField(field);
+ break;
case "hidden":
case "submit":
case "reset":
@@ -219,6 +222,79 @@ function createSelectField(field)
return element;
}
+
+function filterItems(query)
+{
+ const comboboxList = document.getElementById("combobox-list");
+ const items = comboboxList.dataset.items ? JSON.parse(comboboxList.dataset.items) : [];
+ return items.filter(item => item.toLowerCase().includes(query.toLowerCase()));
+}
+
+function renderList(filteredItems, fieldName)
+{
+ const comboboxList = document.getElementById("combobox-list");
+ comboboxList.innerHTML = '';
+ if (filteredItems.length === 0)
+ {
+ comboboxList.style.display = 'none';
+ return;
+ }
+
+ const comboboxInput = document.getElementById(fieldName);
+ filteredItems.forEach(item =>
+ {
+ const listItem = document.createElement('div');
+ listItem.textContent = item;
+ listItem.className = 'combobox-list-item';
+ listItem.addEventListener('click', () =>
+ {
+ comboboxList.style.display = 'none';
+ comboboxInput.value = item;
+ comboboxInput.dispatchEvent(new Event('input', { bubbles: true }));
+ });
+ comboboxList.appendChild(listItem);
+ });
+
+ comboboxList.style.display = 'block';
+}
+
+
+function createComboboxField(field)
+{
+ const combobox = document.createElement("div");
+ combobox.classList.add("combobox");
+
+ const comboboxInput = document.createElement("input");
+ comboboxInput.name = field.Name;
+ comboboxInput.id = field.Name;
+
+ const comboboxList = document.createElement("div");
+ comboboxList.id = "combobox-list";
+ comboboxList.classList.add("combobox-list");
+ comboboxList.dataset.items = JSON.stringify(field.Options);
+
+ combobox.appendChild(comboboxInput);
+ combobox.appendChild(comboboxList);
+
+ comboboxInput.addEventListener('input', () =>
+ {
+ const query = comboboxInput.value;
+ const filteredItems = filterItems(query);
+ renderList(filteredItems, field.Name);
+ });
+
+ document.addEventListener('click', event =>
+ {
+ if (!event.target.closest('.combobox'))
+ {
+ comboboxList.style.display = 'none';
+ }
+ });
+
+ return combobox;
+}
+
+
function createInputOrTextareaField(field)
{
const element = document.createElement(field.Type === "textarea" ? "textarea" : "input");
diff --git a/WebFormBuilder/wwwroot/styles.css b/WebFormBuilder/wwwroot/styles.css
index 6bbf941..7b39777 100644
--- a/WebFormBuilder/wwwroot/styles.css
+++ b/WebFormBuilder/wwwroot/styles.css
@@ -214,3 +214,35 @@ body
transition: all 0.3s ease;
resize: vertical;
}
+
+ .form-container .combobox
+ {
+ position: relative;
+ display: inline-block;
+ }
+
+ .form-container .combobox .combobox-list
+ {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ max-height: 150px;
+ overflow-y: auto;
+ border: 1px solid #ccc;
+ background: white;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ z-index: 10;
+ display: none;
+ }
+
+ .form-container .combobox .combobox-list .combobox-list-item
+ {
+ padding: 8px;
+ cursor: pointer;
+ }
+
+ .form-container .combobox .combobox-list .combobox-list-item:hover
+ {
+ background: #f0f0f0;
+ }