HTML form with dropdown select

How to make an HTML dropdown select with a searchbox

As a website developer, it is almost given that at some point you will work with HTML dropdown select, presenting the user with an array of options to select from.

This happens in the instances where you want the user to choose from already predefined answers/options instead of them entering their own.

This helps reduce redundancy in the system.

For instance, if you were to require the users to input their country, but let them type in the country name instead of selecting, this would create a disaster.

Let’s say the user’s country is USA. Some would write «United States of America», others «USA», others «United States», while others would misspell the name and write something totally different.

It would be a disaster trying to organize, analyze and present the information based on the users’ country. This shows why HTML dropdown select is quite an important form element.

However, this comes with some complexities when the select options are too many. Locating the desired option could become a headache.

For this reason, having a search box within the dropdown select options is such an incredible and life-saving feature that can save a lot of time for many users.

In this article, I will take you through a step-by-step process on how to add a search box to your forms dropdown select fields, using pure HTML or using bootstrap framework.

Making an HTML dropdown select with a search box

First, we will create a sample form on both pure HTML and in bootstrap, with a dropdown select option but without the search box. Then I will show you how to add it.

HTML form with dropdown select

    body < background: #eee; >.signupdiv < background: #fff; border: 1px solid #ddd; box-shadow: 1px 2px 3px #ccc; border-radius: 7px; text-align: center; width: 35%; display: block; margin: auto; margin-top: 100px; >#signupform < padding: 15px; >input, select < margin-bottom: 10px; height: 38px; border: 1px solid #ddd; padding-left: 10px; >input < width: 97%; >button, select < width: 100%; >button  
  Select your country United States of America Kenya United Kingdom India China Canada South Africa   Sign Up  
   

Below is the screenshot of the above code:

And below is how it looks like when you click on the dropdown select.

Bootstrap form with dropdown select

     body < background: #eee; >.signupdiv < background: #fff; border: 1px solid #ddd; box-shadow: 1px 2px 3px #ccc; padding: 10px; margin-top: 100px; >.form-group  
 
Select your country United States of America Kenya United Kingdom India China Canada South Africa  
 
Sign Up 
 
 
   

Below is the screenshot of the above code:

And below is how it looks like when you click on the dropdown select.

From the examples above, there seems to be no need for a search box since we have 7 countries in our options which are all visible at once. But when we include a full list of 195 countries. It’s incredibly important to have a search box to easily find the country when we start to type its name in the search box.

Adding a search box to the dropdown select

We now will go ahead and add a search box to the forms in the above examples.

We will use Select2 to add the search box functionality to the dropdown select fields.

Select2 is a jQuery-based replacement for select boxes. It supports searching remote data sets and infinite scrolling of results.

To start using it, we will need to include the Select2 compiled JavaScript and CSS files on our website. Then, we will initialize the select2 with dropdown select input using jQuery.

1. Using Select2 from a CDN

Including Select2 from a CDN (content delivery network) is the fastest way to set it up and start using it.

This is the recommended way to do include it. This makes it easier for you to deploy your project in different environments, and easily update Select2 when new versions are released.

To include it using this method, simply include the following lines of code in the section of your page.

2. Manual Installation

To manually install Select2 into your website project, download the select2 release of your choice from Github and copy the files in the dist directory to your project.

Then in the same way as using from CDN, add the following lines of code in the section of your page.

Replace above, the «path/to/file/» with the path to your files.

Note: In either of the two methods, make sure to import the jQuery library into your code before importing the select2 plugin or else it won’t work.

Initializing Select2 in your form dropdown select

Add the line of code below with the select input filed Id inside the jquery on ready function.

Examples

HTML form with dropdown select and search box

       body < background: #eee; >.signupdiv < background: #fff; border: 1px solid #ddd; box-shadow: 1px 2px 3px #ccc; border-radius: 7px; text-align: center; width: 35%; display: block; margin: auto; margin-top: 100px; >#signupform < padding: 15px; >input, select < margin-bottom: 10px; height: 38px; border: 1px solid #ddd; padding-left: 10px; >input < width: 97%; >button, select < width: 100%; >button  
  Select your country United States of America Kenya United Kingdom India China Canada South Africa   Sign Up  
   

Below is the screenshot of the code above:

Take note of the selector «#country» in initializing the select2. We have used it because it is the id of our countries input field.

Bootstrap form with dropdown select and search box

       body < background: #eee; >.signupdiv < background: #fff; border: 1px solid #ddd; box-shadow: 1px 2px 3px #ccc; padding: 10px; margin-top: 100px; >.form-group  
 
Select your country United States of America Kenya United Kingdom India China Canada South Africa  
 
Sign Up 
 
 
   

Below is the screenshot of the code above:

If you were keen, you may have noticed that after adding and initializing select on our dropdown select, its height was reduced compared to the other input fields.

To set it to your custom height, just code the CSS code below add it to your other CSS code in the head section, or in an external CSS file. Remember to height attribute values to your desired ones.

Conclusion

When working with HTML form dropdown select fields, you may get to a point where the select options are too many. In such a scenario, it may be tiring for the users to locate their preferred option.

Adding a search box on top of the dropdown options can save them a great deal, increasing the user experience of your site.

In this article, we have covered a comprehensive step-by-step process on how to design nice-looking forms in HTML and bootstrap framework. With have designed forms with dropdown select options and added a search box to them in order to simplify the finding of the preferred options.

It’s my hope that you have enjoyed this tutorial and found it useful. We strive to keep adding more incredible content on a regular basis. To get notified when we add new, subscribe to our email newsletter.

You may also consider linking to this page from your website or share it to your networks on social media to help reach more people.

Related Articles

Источник

Dropdown

The dropdown input allows users to select a value from a customizable list of options:

Defining options

The options prop can accept three different formats of values:

• An array of objects with value and label keys (see example above)
• An array of strings [‘A’, ‘B’, ‘C’]
• An object literal with key-value pairs
• A function that returns any of the above

If you assign options as an empty array, the input will be rendered in a disabled state.

Empty message

The dropdown input, by default, will be rendered in a disabled state if no options are passed. Optionally, you may pass the empty-message prop a message to display when no options are available:

Slots

Unlike native select elements, the dropdown input allows you to customize the options list with markup.

Option slot

The dropdown input allows you to customize the look and feel of each option by using the option slot. In this example, we are using the option slot to display each option’s asset; logo and name:

Selection slot

If you only want to customize the display of the selected option, use the selection slot:

Loading options

Instead of passing a static list of options to the options prop, you can assign it to a function. Doing so is useful when you need to load options from an API or another source.

Single request

Let’s say we had an API endpoint that returned all the options we needed for a given dropdown input. Here is an example of how we could write the dropdown input to load options from a single request:

In the example above, we are assigning the options prop to the loadHorrorMovies function. After the request, we’re iterating over the results to ensure that we return an array of objects with explicit value and label properties.

Multiple pages

What about loading options from an API where you need to be able to make multiple requests to perform pagination? When a function is set to the options prop it is passed FormKit node’s context object as an argument. Within this context object are page and hasNextPage properties. The page property is the current page number, and the hasNextPage property is a function to be called when there are more pages to load:

In the above example, we are calling hasNextPage when we determine there are more pages to load. When this is done, FormKit appends a Load more option at the end of the rendered options list and automatically increments its page property. When the user selects the Load more option, the function assigned to the options prop is called again, and the process repeats.

Option loader

Rehydrating values

FormKit’s dropdown input also provides an optionLoader prop that allows you to rehydrate values that are not in the options list. In this example, we’ll provide the autocomplete an initial value (a movie ID), and assign the optionLoader to a function that will make a request to the API to get the movie:

Notice in the example above that the optionLoader function is passed two arguments: the value of the selected option (in this case, the movie ID) and the cachedOption . The cachedOption prop is used for preventing unnecessary lookups. If the cachedOption is not null it means that the selected option has already been loaded, and you can return the cachedOption directly.

Fetching additional data

Instead of using the optionLoader prop to rehydrate values that are not in the options list, you can use the optionLoader to perform a look-up to fetch additional data. In this example, after selecting an option, we are going to perform a look-up to load the selected option’s movie review:

Источник