{"id":24648,"date":"2024-04-08T00:00:07","date_gmt":"2024-04-07T23:00:07","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/domina-el-autocompletado-de-formularios-con-datalist-en-html\/"},"modified":"2024-06-03T17:36:48","modified_gmt":"2024-06-03T16:36:48","slug":"domina-el-autocompletado-de-formularios-con-datalist-en-html","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/master-form-autocompletion-with-datalist-in-html\/","title":{"rendered":"Master Form Autocompletion with HTML Datalist"},"content":{"rendered":"<p>The element <code>datalist<\/code> in HTML5 is a versatile tool that provides autocomplete suggestions as the user types in an input field. It is ideal for improving user experience by providing possible matches from a predefined list, making interaction faster and more effective. Next, we will explore in depth the advanced use of <code>datalist<\/code> and how to get the most out of it when creating web forms.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-form-autocompletion-with-datalist-in-html\/#El_poder_oculto_de_datalist\" >The hidden power of datalist<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-form-autocompletion-with-datalist-in-html\/#Un_ejemplo_basico_para_empezar\" >A basic example to get started<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-form-autocompletion-with-datalist-in-html\/#Personalizando_datalist_para_necesidades_especificas\" >Customizing datalist for specific needs<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-form-autocompletion-with-datalist-in-html\/#Filtrando_datos_en_funcion_del_contexto\" >Filtering data based on context<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-form-autocompletion-with-datalist-in-html\/#Dinamismo_con_JavaScript\" >Dynamism with JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-form-autocompletion-with-datalist-in-html\/#Marcando_el_camino_con_etiquetas_de_datos\" >Leading the way with data labels<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-form-autocompletion-with-datalist-in-html\/#Incorporacion_de_imagenes_y_otros_tipos_de_contenido\" >Incorporating images and other types of content<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-form-autocompletion-with-datalist-in-html\/#Manejo_de_opciones_multiples\" >Handling multiple options<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-form-autocompletion-with-datalist-in-html\/#Rendimiento_y_gran_cantidad_de_datos\" >Performance and large amount of data<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-form-autocompletion-with-datalist-in-html\/#Mejores_practicas_para_aprovechar_datalist\" >Best practices for leveraging datalist<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-form-autocompletion-with-datalist-in-html\/#Validaciones_y_limpieza_de_datos\" >Validations and data cleaning<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-form-autocompletion-with-datalist-in-html\/#Accesibilidad_y_Usabilidad\" >Accessibility and Usability<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-form-autocompletion-with-datalist-in-html\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"El_poder_oculto_de_datalist\"><\/span>The hidden power of <code>datalist<\/code><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Although often underestimated, <code>datalist<\/code> is powerfull. You can use it to offer dynamic suggestions on forms, simplifying search and data entry processes. Its integration is simple: an element is associated <code><input><\/code> with a <code>&lt;datalist&gt;<\/code>, which contains several <code>&lt;option&gt;<\/code> with the data that will be auto-completed.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Un_ejemplo_basico_para_empezar\"><\/span>A basic example to get started<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To understand how it works, let&#039;s start with a simple example:<\/p>\n<pre><code class=\"&quot;language-html&quot;\"><input type=\"text\" id=\"ejemplo-datalist\">\n\n    \n    \n    <!-- ... M\u00e1s opciones ... --><\/code><\/pre>\n<p>With this structure, the user who starts typing in the input field will see suggestions that match the entered text.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Personalizando_datalist_para_necesidades_especificas\"><\/span>Customizing <code>datalist<\/code> for specific needs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Filtrando_datos_en_funcion_del_contexto\"><\/span>Filtering data based on context<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>We can increase the intelligence of our autocomplete by implementing contextual filtering. This means displaying only those relevant options based on user input or other form elements. For example, if a user selects a country in a field, we could filter the cities available in the <code>datalist<\/code>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Dinamismo_con_JavaScript\"><\/span>Dynamism with JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>With JavaScript, <code>datalist<\/code> reaches another level. Suppose we want to dynamically update autocomplete options based on a remote data source, such as an API. This is achieved by listening to user input events and using AJAX to search the data source, updating the <code>datalist<\/code> in each suggestion.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">const input = document.querySelector(&#039;1TP5Example-datalist&#039;); const dataList = document.querySelector(&#039;#example-list&#039;); input.addEventListener(&#039;input&#039;, function(event) { const value = event.target.value; \/\/ Implement dataList lookup and update logic here });<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Marcando_el_camino_con_etiquetas_de_datos\"><\/span>Leading the way with data labels<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>We can extend the capacity of <code>datalist<\/code> using attributes like <code>data-*<\/code> to store additional information about the options. This is especially useful in situations where each option has more data associated with it, such as prices or identifiers.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Incorporacion_de_imagenes_y_otros_tipos_de_contenido\"><\/span>Incorporating images and other types of content<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Although <code>datalist<\/code> does not directly support elements other than <code>&lt;option&gt;<\/code>, there are advanced tricks, such as incorporating emojis or special characters in the values, to simulate the presence of images or enrich the visual options. However, if you need richer functionality, you could consider implementing a custom autocomplete widget.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Manejo_de_opciones_multiples\"><\/span>Handling multiple options<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><code>datalist<\/code> works great with single select inputs. But what happens if we want to select several options? This is where creativity in coding comes into play: we can implement logic to accept and process multiple selections in a way that syncs properly with our application.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Rendimiento_y_gran_cantidad_de_datos\"><\/span>Performance and large amount of data<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>When we work with thousands of options, it is important to consider performance. One technique is to load only a portion of the options and employ lazy loading techniques to retrieve and display more options as needed, thereby improving the user experience and form performance.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Mejores_practicas_para_aprovechar_datalist\"><\/span>Best practices to take advantage of <code>datalist<\/code><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Validaciones_y_limpieza_de_datos\"><\/span>Validations and data cleaning<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>While <code>datalist<\/code> offers suggestions, does not limit user input. We must ensure that we implement proper validations on the client and server side to ensure that accurate and valid data is sent.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Accesibilidad_y_Usabilidad\"><\/span>Accessibility and Usability<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>We must consider the accessibility and usability of the forms with <code>datalist<\/code>. Implement clear labels and ensure suggestions are legible and easy to navigate for users using assistive technology.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>He <code>&lt;datalist&gt;<\/code> It is a must-have tool for any web developer looking to implement an optimized user experience on their forms. We hope that with these tips you can implement it more effectively and offer your users a more agile and satisfactory interaction.<\/p>\n<p>Feel free to apply these tips to your projects and if you have any questions or want to share your experiences, contact me via <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">my contact page<\/a>. I&#039;m here to help you get the most out of your web developments! And remember, you can always find more helpful development tips and articles at <a href=\"https:\/\/nelkodev.com\/en\/\">nelkodev.com<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>El elemento datalist en HTML5 es una herramienta vers\u00e1til que proporciona sugerencias de autocompletado mientras el usuario escribe en un campo de entrada. Es ideal para mejorar la experiencia del usuario al proporcionar posibles coincidencias de una lista predefinida, lo que hace que la interacci\u00f3n sea m\u00e1s r\u00e1pida y efectiva. A continuaci\u00f3n, exploraremos con profundidad [&hellip;]<\/p>","protected":false},"author":1,"featured_media":24649,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420],"tags":[693,1476,205,90,1473,492,475],"class_list":["post-24648","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-datalist","tag-autocompletado","tag-blog","tag-con","tag-domina","tag-formularios","tag-html"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/24648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=24648"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/24648\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/24649"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=24648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=24648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=24648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}