{"id":28118,"date":"2016-10-04T21:01:36","date_gmt":"2016-10-04T13:01:36","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28118"},"modified":"2025-04-03T23:50:45","modified_gmt":"2025-04-03T15:50:45","slug":"search-select-using-datalist","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/search-select-using-datalist\/","title":{"rendered":"How to Create a Datalist That’s Instantly Searchable"},"content":{"rendered":"

Dropdown lists are a neat way for providing options<\/strong> for an input field, particularly when the list of options available are long. A user can choose the option they want by typing into the field<\/strong>, or look through the options<\/strong> that may be a match for what they are looking for. Being able to search through the options<\/strong>, however, is the ideal solution.<\/p>\n

This behaviour can be achieved with the <datalist><\/code><\/a> HTML element that displays input suggestions<\/strong> for different controls, such as the <input><\/code> tag. However <datalist><\/code> only shows the available options when the user have already typed something<\/strong> into the input field.<\/p>\n

We can make an input field more usable if we enable users to access the full list of options<\/strong> at any time during the input taking process.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tExploring HTML5 Form Input Types: Date, Color, and Range<\/a>\n\t\t\t\t<\/p>\n

In this post, we\u2019re going to see how to create a drop-down list that\u2019s searchable at any time<\/strong> using the <select><\/code> and <datalist><\/code> HTML elements and a little JavaScript.<\/p>\n

1. Create a Datalist with Options<\/h3>\n

First, we create a datalist for different text editors. Make sure that the value of the list<\/code> attribute of the <input><\/code> tag is the same as<\/strong> the id<\/code> of the <datalist><\/code> tag \u2013 this is how we bind them to each other.<\/p>\n

\r\n<input type=\"text\" list=\"text_editors\">\r\n<datalist id=\"text_editors\">\r\n    <option value=\"Atom\">Atom\r\n    <option value=\"Brackets\">Brackets\r\n    <option value=\"Notepad ++\">Notepad ++\r\n    <option value=\"Notepad\">Notepad\r\n    <option value=\"Sublime Text\">Sublime Text\r\n    <option value=\"TextEdit\">TextEdit\r\n    <option value=\"TextMate\">TextMate\r\n    <option value=\"Wordpad\">Wordpad\r\n<\/datalist><\/pre>\n
\"Initial
Initial Datalist<\/figcaption><\/figure>\n
2. Make the Datalist Visible<\/h3>\n
By default, the <datalist><\/code> HTML element is hidden<\/strong>. We can only see it, when we start to type an input<\/strong> into the field the datalist is attached to.<\/p>\n
However there is a way to \"force\" the content of the datalist (i.e. all of its options) to appear on the webpage<\/strong>. We only need to give it a suitable display<\/code> property value other than <\/strong>none<\/strong><\/code>, for instance display:block;<\/code>.<\/p>\n
\r\ndatalist {\r\n    display: block;\r\n}\r\n<\/pre>\n
The displayed options aren\u2019t yet selectable<\/strong> at this point, the browser only renders the options<\/strong> it finds inside the datalist.<\/p>\n
\"Visible
Datalist Made Visible<\/figcaption><\/figure>\n
As aforementioned, due to the built-in behaviour of the <datalist><\/code> element, a part of the options already appear and are selectable<\/strong>, but only when the user starts to type in a string to which the browser can find a matching option<\/strong>.<\/p>\n
\"Visible
Visible Datalist with Suggestions<\/figcaption><\/figure>\n
We also need to find a mechanism to make all<\/em> options (on the above screenshot displayed under the dropdown datalist) selectable<\/strong> at any other point of the input taking process<\/strong> \u2013 when users want to check out the options before they type anything, or while they\u2019ve already taken something into the input field.<\/p>\n
3. Bring in the <select><\/code> HTML Element<\/h3>\n
There are two ways to enable users to see and select all the options<\/strong> whenever they want:<\/p>\n
    \n
  1. We can add a click event handler<\/strong> to every option, and use it to select an option when it\u2019s clicked on, or we can also transform<\/strong> the options into a real drop-down list<\/strong>, which, by default, is selectable.<\/li>\n
  2. We can wrap the options<\/strong> of the datalist with the <select><\/code><\/a> HTML element<\/strong>.<\/li>\n<\/ol>\n
    We\u2019ll choose the second method, as it\u2019s simpler, and it\u2019s allowed to be used as a fallback mechanism<\/strong> in browsers that don\u2019t support the <datalist><\/code> element. When a browser can\u2019t render & display the datalist, it renders the <select><\/code> element with all of its options<\/strong> instead.<\/p>\n
    By default, the select<\/code> element doesn\u2019t appear in browsers that does support datalist, that is, until we force the datalist to render its content<\/strong> with the display: block;<\/code> CSS rule.<\/p>\n
    So, when we wrap the options<\/strong> from the above example (where datalist has display:block<\/code>) with the <select><\/code> HTML tag, the code looks like below:<\/p>\n
    \r\n<input type=\"text\" list=\"text_editors\">\r\n<datalist id=\"text_editors\">\r\n    <select>\r\n        <option value=\"Atom\">Atom\r\n        <option value=\"Brackets\">Brackets\r\n        <option value=\"Notepad ++\">Notepad ++\r\n        <option value=\"Notepad\">Notepad\r\n        <option value=\"Sublime Text\">Sublime Text\r\n        <option value=\"TextEdit\">TextEdit\r\n        <option value=\"TextMate\">TextMate\r\n        <option value=\"Wordpad\">Wordpad\r\n    <\/select>\r\n<\/datalist><\/pre>\n
    \"Datalist
    Datalist Combined with <select><\/code><\/figcaption><\/figure>\n
    To see all options<\/strong> of select<\/code> in the dropdown list, we need to use the attributes multiple<\/code><\/strong> to show more than one options, and size<\/code><\/strong> for the number of options we want to show.<\/p>\n
    \r\n<select multiple size=8>\r\n<\/pre>\n
    \"Select
    Adding the multiple<\/code> attribute to the <select><\/code> tag<\/figcaption><\/figure>\n
    4. Add a Toggle Button<\/h3>\n
    The full drop-down list is supposed to appear only<\/strong> when the user clicks a toggle button<\/strong> next to the input field, while the user types the working datalist is shown. Let\u2019s change the display<\/code> value of the datalist<\/strong> to none<\/code>, and also add a button<\/strong> next to the input field, which will toggle the display<\/code> value of the datalist, and consequently trigger the appearance of select<\/code>.<\/p>\n
    \r\ndatalist {\r\n\tdisplay: none;\r\n}\r\n<\/pre>\n
    We also need to add the following button above the datalist in the HTML file:<\/p>\n
    \r\n<button>\u25bc<\/button>\r\n<\/pre>\n
    Now let\u2019s see the JavaScript. First, we define the initial variables<\/strong>.<\/p>\n
    \r\nbutton = document.querySelector('button');\r\ndatalist = document.querySelector('datalist');\r\nselect = document.querySelector('select');\r\noptions = select.options;<\/pre>\n
    Next, we need to add an event listener<\/strong> (toggle_ddl<\/code>) to the click event of the button which will toggle the appearance of the datalist<\/strong>.<\/p>\n
    \r\nbutton.addEventListener('click', toggle_ddl);\r\n<\/pre>\n
    Then, we define the toggle_ddl()<\/code> function. To do so, we need to check the value of the datalist.style.display<\/code> property<\/strong>. If it\u2019s an empty string, the datalist is hidden, so we need to set its value to block<\/code><\/strong>, and also to change the button<\/strong> from a down pointing arrow to an arrow pointing up.<\/p>\n
    \r\nfunction toggle_ddl(){\r\n    \/* if DDL is hidden *\/\r\n    if(datalist.style.display === ''){\r\n        \/* show DDL *\/\r\n        datalist.style.display = 'block';\r\n        this.textContent=\"\u25b2\";\r\n    }\r\n    else hide_select();\r\n}\r\nfunction hide_select(){\r\n    \/* hide DDL *\/\r\n    datalist.style.display = '';\r\n    button.textContent=\"\u25bc\";\r\n}\r\n<\/pre>\n
    The hide_select()<\/code> function hides the datalist<\/strong> by setting the datalist.style.display<\/code> property back to an empty string, and changing the button arrow back to point downwards.<\/p>\n
    In the final setup, if the input fields hold a previously selected option and the drop-down list has also been triggered by a later button click, the previoulsy selected option also needs to be shown as selected<\/strong> in the drop-down list.<\/p>\n
    So, let\u2019s add the following highlighted code to the toggle_ddl()<\/code> function:<\/p>\n
    \r\nfunction toggle_ddl(){\r\n    \/* if DDL is hidden *\/\r\n    if(datalist.style.display === ''){\r\n        \/* show DDL *\/\r\n        datalist.style.display = 'block';\r\n        this.textContent=\"\u25b2\";\r\n        var val  = input.value;\r\n        for(var i=0; i<options.length; i++) {\r\n            if ( options[i].text === val ) {\r\n                select.selectedIndex = i; break;\r\n            }\r\n        }\r\n    }\r\n    else hide_select();\r\n}\r\nfunction hide_select(){\r\n    \/* hide DDL *\/\r\n    datalist.style.display = '';\r\n    button.textContent=\"\u25bc\";\r\n}\r\n<\/pre>\n
    We also want to hide the drop-down list when the user is typing into the input field (at the time the working datalist will appear).<\/p>\n
    \r\n\/* when the user wants to type into text field, hide DDL *\/\r\ninput = document.querySelector('input');\r\ninput.addEventListener('focus', hide_select);\r\n<\/pre>\n
    5. Update Input when an Option is Selected<\/h3>\n
    Finally, let\u2019s add a change<\/code> event handler<\/strong> to the <select><\/code> tag, so that when the user selects an option from the drop-down list, its value will be displayed inside the <input><\/code> field as well.<\/p>\n
    \r\n\/* when user selects an option from DDL, write it to text field *\/\r\nselect.addEventListener('change',fill_input);\r\nfunction fill_input(){\r\n    input.value = options[this.selectedIndex].value;\r\n    hide_select();\r\n}\r\n<\/pre>\n
    Drawbacks<\/h3>\n
    The main drawback of this technique is the absence of a direct way to style the <datalist><\/code> element<\/strong> with CSS (the appearance of the <datalist><\/code> and <select><\/code> tags vary across different browsers).<\/p>\n
    Also, in Firefox, the input text is matched against options that contains<\/em> the input characters, while other browsers match options that begin with<\/em> those characters. The W3C spec<\/a> for datalist doesn\u2019t explicitly specify how the matching should be done.<\/p>\n
    Other than that, this method is good and works in all major browsers<\/strong>, whereas in browsers where it may not work, users can still see the drop-down list, only the suggestions won\u2019t appear.<\/p>\n
    Check out the final demo with a bit of CSS styling below:<\/p>\n