Combobox: Allowing user input value to be kept if search result is empty #95
-
|
Thanks for this awesome library. For combobox, is there anyway I can allow users to select the value they input regardless search results are empty or not? Can any one help please? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Hello @hasnatbabur , To allow users to select a value even when the search results are empty, you can implement a custom JavaScript solution. Here’s an example that demonstrates how to achieve this: <!doctype html>
<html lang=“en”>
<head>
<title>ComboBox</title>
</head>
<body>
<div
class=“relative max-w-sm”
data-combo-box=‘{
“apiUrl”: “https://restcountries.com/v3.1”,
“apiSearchPath”: “name”,
“apiSearchDefaultPath”: “all”,
“outputEmptyTemplate”: “<div class=\“dropdown-item\“>No results found. Press Enter to use entered value.</div>“,
“outputItemTemplate”: “<div class=\“dropdown-item combo-box-selected:dropdown-active\” data-combo-box-output-item><div class=\“flex justify-between items-center w-full\“><div><div class=\“hidden\” data-combo-box-output-item-field=\“ccn3\“></div><div data-combo-box-output-item-field=\“name.common\” data-combo-box-search-text data-combo-box-value></div></div><span class=\“icon-[tabler--check] text-primary combo-box-selected:block hidden size-4 shrink-0\“></span></div></div>”
}’
id=“custom-value-combo-box”
>
<div class=“relative”>
<input
class=“input”
type=“text”
value=“India”
role=“combobox”
aria-expanded=“false”
data-combo-box-input=“”
aria-label=“based on API pathes combobox”
/>
<span
class=“icon-[tabler--caret-up-down] text-base-content absolute end-3 top-1/2 size-4 shrink-0 -translate-y-1/2”
data-combo-box-toggle=“”
></span>
</div>
<div
class=“bg-base-100 rounded-box shadow-base-300/20 absolute z-50 max-h-44 w-full space-y-0.5 overflow-y-auto p-2 shadow-lg”
style=“display: none”
data-combo-box-output=“”
></div>
</div>
<script>
window.addEventListener(“load”, function () {
const customComboBox = document.getElementById(“custom-value-combo-box”);
if (!customComboBox) return;
const comboBoxInstance = HSComboBox.getInstance(customComboBox, true);
if (!comboBoxInstance || !comboBoxInstance.element) return;
comboBoxInstance.element.on(“select”, function (data) {
console.log(“Selected value:“, comboBoxInstance.element.value);
console.log(“Selected data:“, data);
});
customComboBox.addEventListener(“keydown”, function (e) {
if (e.key === “Enter”) {
const inputElement = customComboBox.querySelector(“[data-combo-box-input]“);
const customValue = inputElement.value;
const customData = {
name: { common: customValue },
ccn3: “custom”
};
comboBoxInstance.element.setValue(customValue, customData);
comboBoxInstance.element.close();
}
});
});
</script>
</body>
</html>This code allows users to enter a custom value when no matching results are found. When they press “Enter”, it adds their input as a selectable value. Also, please avoid creating duplicate discussions. Hope this helps! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks a lot |
Beta Was this translation helpful? Give feedback.
Hello @hasnatbabur ,
To allow users to select a value even when the search results are empty, you can implement a custom JavaScript solution. Here’s an example that demonstrates how to achieve this: