mrSearch<\/em>, which will do the heavy work. <\/p>\n\n\n\nHere is the function simplified, feel free to rename it to anything you want:<\/p>\n\n\n\n
function mrSearch(t, e) {\n \/\/t = Datalist\n \/\/e = Input with list attribute\n let mrSearchChildren = t.children;\n if (mrSearchChildren) {\n if (e.value !== \"\") {\n t.style.removeProperty(\"display\");\n for (let id = 0; id < mrSearchChildren.length; id++) {\n let mrSearchChild = mrSearchChildren[id];\n if (mrSearchChild.hasAttribute(\"value\")) {\n \/\/If the child does not contain any text, show the value as text.\n if (!mrSearchChild.innerText) {\n mrSearchChild.innerText = mrSearchChild.getAttribute(\"value\");\n }\n \n \/\/Change the input value when clicking on the child.\n mrSearchChild.addEventListener(\"click\", function () {\n e.value = mrSearchChild.getAttribute(\"value\");\n });\n }\n mrSearchChild.style.display = \"none\";\n \n \/\/Checking the child outerHTML because I want to search text also inside the value attribute. Convert in lowercase to not be case sensitive.\n if (\n mrSearchChild.outerHTML\n .toLowerCase()\n .replace(\/[^a-zA-Z0-9 ]\/g, \"\")\n .includes(e.value.toLowerCase().replace(\/[^a-zA-Z0-9 ]\/g, \"\"))\n ) {\n mrSearchChild.style.removeProperty(\"display\");\n }\n }\n } else {\n t.style.display = \"none\";\n }\n }\n}\n\n<\/code><\/pre>\n\n\n\nHere we changed the Input value when clicking on the element child (the datalist option that we transformed)<\/em> and we\u2019ll make the search case-insensitive.<\/p>\n\n\n\nCheck the comments inside the code to better understand which parts replicate which datalist \u201csearch\u201d feature.<\/p>\n\n\n\n
Extra: If you have full control over the original datalist, you probably added a value and text to each option. If you don\u2019t have, then this code as you covered, it copies the value into the text when no text is found.<\/p>\n\n\n\n
And that\u2019s it! <\/strong>Now you replicated most datalists\u2019 functionalities and can start styling the element, with a CSS code similar to the one shown before<\/a>.<\/p>\n\n\n\n3- Take it to the next level (Optional and Advanced)<\/strong><\/span><\/h3>\n\n\n\nIf you feel inspired, now that you have full control over the code, you can add extra features! Features that not even the original datalist has.<\/p>\n\n\n\n
For example:<\/p>\n\n\n\n