Guide: How to Design Datalist That’s Easily Searchable
Dropdown lists are a useful way to do this offer options for an input field, especially if the list of options available is long. A user can choose the desired option type in the field, or view the options that can be a match for what they are looking for. Search the possibilitiesis the ideal solution. This behavior can be achieved with the HTML element that displays input suggestions for various controls, such as the tag. however, only shows the available options when the user has them already typed something in the input field. We can make an input field more useful if we allow users to do so access the full list of options at any time during the entry process. In this post we are going to see how to make a drop-down list that can be searched at any time using the HTML elements and and a little JavaScript. First, we’ll create a datalist for different text editors. Make sure the list attribute value is tag is the same as the id of the tag – this is how we tie them together. Atom Brackets Notepad ++ Notepad Sublime Text TextEdit TextMate Wordpad < / datalist>Initial datalist By default it is HTML element hiddenWe can only see it when we start typing an entry in the field that the datalist is associated with. However, there is a way to ‘force’ the data list’s content (i.e. all its options) to appear on the web pageWe just need to give it a suitable value for the display property other than no, for example display: block;. datalist {display: block;} The options displayed are not yet selectable currently only the browser displays the options it finds in the datalist. Datalist made visible As mentioned earlier, due to the built-in behavior of the -element, some of the options already appear and can be selected, but only when the user starts typing a string that the browser can use find a matching option Visible datalist with suggestions We also need to find a mechanism to make all the options (shown in the screenshot above under the datalist dropdown) selectable Bee any other point of the entry process – when users want to view the options before typing, or while they have already entered something in the input field. There are two ways to enable users view and select all options whenever they want: We choose the second method because it is simpler and can be used as a fallback mechanism in browsers that use the element. If a browser can’t display and display the datalist, it’s does it matter element with all its options instead. By default, the select element does not appear in browsers that support datalist, that is, until we get force the datalist to display its content with the display: block; CSS rule. So if we wrap the options from the example above (where datalist has display: block) with the HTML tag, the code looks like this: Atom BracketsDatalist combined with To view all options from select in the drop-down list, we need to use the attributes multiple to display more than one option, and size for the number of options we want to show.
Add the multiple attribute to the tag
The full drop-down list should appear nothing but when the user clicks a switch button next to the input field, while the user is typing, the working datalist is shown. Let’s change the datalist display value for no one, and also add a button next to the input field, which toggles the datalist display value and thus activates the select display.
datalist {display: none;}
We must also add the following button above the datalist in the HTML file:
button> à ¢  ?? ¼
Now let’s take a look at JavaScript. First, we define the initial variables
button = document.querySelector (‘button’); datalist = document.querySelector (‘datalist’); select = document.querySelector (‘select’); options = select.options;
Next, we must add an event listener (toggle_ddl) to the click event of the button which will enable the datalist appearance
button.addEventListener (‘click’, toggle_ddl);
Next, we define the toggle_ddl () function. To do this, we must check the value of the datalist.style.display propertyIf it is an empty string, the datalist is hidden, so that’s necessary set its value to block, and also to change the button from a downward pointing arrow to an arrow pointing up
function toggle_ddl () {/ * if DDL is hidden * / if (datalist.style.display === ”) {/ * show DDL * / datalist.style.display = ‘block’; this.textContent = ”à ¢  ?? ² ”;} else hide_select ();} function hide_select () {/ * hide DDL * / datalist.style.display =”;button.textContent = ”à ¢  ?? ¼ ”;}
The hide_select () function hides the datalist by setting the datalist.style.display property back to an empty string and the button back arrow to point down.
In the final setup, if the input fields contain a previously selected option and the drop-down list has also been activated by a later button click, also the previously selected option should be displayed as selected from the drop-down list.
So let’s add the following highlighted code to the toggle_ddl () function:
function toggle_ddl () {/ * if DDL is hidden * / if (datalist.style.display === ”) {/ * show DDL * / datalist.style.display = ‘block’; this.textContent = ”à ¢  ?? ² ”; var val = input.value; for (var i = 0; i[i].text === val) {select.selectedIndex = i; break;}}} else hide_select ();} function hide_select () {/ * hide DDL * / datalist.style.display = ”;button.textContent = ”à ¢  ?? ¼ ”;}
We also want to hide the drop-down list when the user types in the input field (when the working data list appears).
/ * when the user wants to type in a text field, hide DDL * / input = document.querySelector (‘input’); input.addEventListener (‘focus’, hide_select);
Let’s conclude add a change event handler to the tag, so that when the user selects an option from the drop-down list, its value also appears in the field is displayed.
/ * when the user selects an option from DDL, write it in the text field * / select.addEventListener (‘change’, fill_input); function fill_input () {input.value = options[this.selectedIndex].value; hide_select ();}
The main drawback of this technique is the absence of a direct way to it element with CSS (the appearance of the tags and varies by browser).
In addition, Firefox compares the input text against options containing the input characters, while other browsers look for options that start with those characters. The W3C data list specification does not explicitly specify how the matching should be done.
Other than that, this method is good as well works in all major browsers, while in browsers where it might not work, users can still see the drop-down list, only the suggestions are not displayed.
look at the final demo with a bit of CSS styling below:
See Searching the Pen Drop-Down List with Datalist by Preethi (@rpsthecoder) on CodePen.
How to Design Datalist That’s Easily Searchable: benefits
Faq
Final note
I hope you like the guide How to Design Datalist That’s Easily Searchable. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the How to Design Datalist That’s Easily Searchable, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “How to Design Datalist That’s Easily Searchable”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide How to Design Datalist That’s Easily Searchable, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.
