How to Create a Search Box Widget

Creating a search box widget can significantly enhance the user experience on your website. In this tutorial, we'll guide you through the process of building a simple yet effective search box widget using HTML, CSS, and JavaScript. Let's get started!

Prerequisites

Before we dive into the creation of the search box widget, ensure you have the following prerequisites in place:

A basic understanding of HTML, CSS, and JavaScript.
A text editor or an Integrated Development Environment (IDE) like Visual Studio Code.

Creating the HTML Structure

First, let's create the basic structure for our search box widget using HTML. Open your text editor or IDE and paste the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Box Widget</title>
    <link rel="stylesheet" href="styles.css">
    <script src="scripts.js" defer></script>
</head>
<body>
    <div class="search-box">
        <input type="text" placeholder="Search...">
        <button type="submit">Go</button>
    </div>
</body>
</html>

This code sets up a basic HTML structure for our search box widget, which includes an input field and a submit button. It also includes links to our CSS and JavaScript files.

Styling the Widget with CSS

Next, let's add some styles to our search box widget using CSS. Create or edit your styles.css file and paste the following code:

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

.search-box {
    width: 100%;
    position: relative;
}

.search-box input[type="text"] {
    width: 100%;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 1px solid gray;
}

.search-box input[type="text"]:focus {
    background-color: #f1f1f1;
    outline: none;
}

.search-box button {
    position: absolute;
    right: 0;
    top: 0;
    padding: 12px 20px;
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
}

This code sets up the basic styling for our search box widget, including the width, positioning, and appearance of the input field and submit button.

Adding Functionality with JavaScript

Finally, let's add some functionality to our search box widget using JavaScript. Create or edit your scripts.js file and paste the following code:

document.querySelector('.search-box input[type="text"]').addEventListener('keyup', function(event) {
    if (event.keyCode === 13) {
        event.preventDefault();
        window.location.href = 'https://www.google.com/search?q=' + this.value;
    }
});

This code listens for the keyup event on our search input field and checks if the pressed key is the Enter key (keyCode 13). If it is, it prevents the default form submission behavior and redirects the user to a Google search page with their query.

Conclusion

There you have it! You've now created a simple yet effective search box widget using HTML, CSS, and JavaScript. Feel free to customize this code further to fit your specific needs and design preferences. Happy coding!

Published January, 2016