In the world of web development, creating user-friendly and visually appealing forms is essential. One of the most commonly used form elements is the combo box, which allows users to select from a list of options. However, what if you need to display multiple columns of data in your combo box? This is where a multi-column combo box comes in handy. In this article, we will explore how to create a multi-column combo box using HTML and JavaScript.
Before we dive into the code, let's understand what a combo box is. A combo box, also known as a drop-down list, is a form element that allows users to choose from a list of options. It consists of a text box and a drop-down arrow. When the arrow is clicked, a list of options appears, and the user can select one of them. In most cases, the options are displayed in a single column, making it difficult to display a large number of options. This is where a multi-column combo box comes into play.
To create a multi-column combo box, we will use HTML and JavaScript. First, let's create a basic HTML structure for our form. We will have a form element with a label, a text box, and a drop-down arrow. We will also add a div element with an id of "combo-box" where we will display our options in multiple columns.
```
<form>
<label for="combo-box">Choose an option:</label>
<input type="text" id="combo-box">
<span class="dropdown-arrow"></span>
<div id="combo-box"></div>
</form>
```
Next, we will add some CSS to style our form and make it more visually appealing. We will also set the display property of the div element with the id of "combo-box" to "none" so that it is hidden by default.
```
form {
position: relative;
}
#combo-box {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-height: 200px;
overflow-y: scroll;
border: 1px solid #ccc;
}
.dropdown-arrow {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
cursor: pointer;
transition: all 0.3s ease;
}
.dropdown-arrow:hover {
border-color: red;
}
```
Now comes the fun part – adding functionality to our combo box using JavaScript. We will start by creating an array of options to display in our combo box. We will have three columns, each with five options.
```
const options = [
["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"],
["Option 6", "Option 7", "Option 8", "Option 9", "Option 10"],
["Option 11", "Option 12", "Option 13", "Option 14", "Option 15"]
];
```
Next, we will add an event listener to our text box, which will trigger a function when the user types in it. Inside the function, we will first check if the input value is empty. If it is, we will hide the div element with the id of "combo-box." If the input value is not empty, we will show the div element and display the options in multiple columns.
```
const textBox = document.getElementById("combo-box");
const comboBox = document.getElementById("combo-box");
textBox.addEventListener("input", function() {
if (textBox.value === "") {
comboBox.style.display = "none";
} else {
showOptions();
comboBox.style.display = "block";
}
});
```
The showOptions function will first clear the contents of the div element and then loop through the options array to create multiple columns of options. We will use the innerHTML property to add the options to the div element dynamically.
```
function showOptions() {
comboBox.innerHTML = "";
for (let i = 0; i < options.length; i++) {
let column = document.createElement("ul");
for (let j = 0; j < options[i].length; j++) {
let option = document.createElement("li");
option.textContent = options[i][j];
column.appendChild(option);
}
comboBox.appendChild(column);
}
}
```
And there you have it – a multi-column combo box using HTML and JavaScript! You can further customize the styling and functionality of the combo box to suit your needs. With this technique, you can display a large number of options in a user-friendly and
