Derrick Reeder :: UX Engineer

HTML Setup

First, let's set up our HTML code. We'll need an input element for the search bar, and a table element for displaying the search results. Here's an example HTML code that we can use:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Simple Typeahead Feature with JavaScript</title>
  <style>
    /* Add your CSS code here */
  </style>
</head>
<body>
  <div class="wrapper">
    <input type="search" id="search-input" placeholder="Search Products...">
    <table id="product-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Description</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
  <script>
    // Add your JavaScript code here
  </script>
</body>
</html>

Notice that we've included a style element in the head section where we can add our CSS code. We've also included a script element at the bottom of the body where we can add our JavaScript code.

SCSS Styling

Now, let's add some CSS styling to make our HTML elements look nicer. We'll style the input and table elements to make them look more visually appealing. Here's an example SCSS code that we can use:

$primary: #2d4263;
$body: #f6f6f6;
$search-color: #555;
$search-background: #ffffff;
$search-border-radius: 5px;

body {
  background: $body;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
.wrapper {
  padding: 15px;
  position: relative;

  #search-input {
    background: $search-background;
    border-radius: $search-border-radius;
    color: $search-color;
    width: 100%;
    position: relative;
    font-size: 16px;
    padding: 10px;
    border: 1px solid #d6d6d6;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  }

  #product-table {
    border-collapse: collapse;
    margin-top: 20px;
    width: 100%;
    position: relative;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    background: #ffffff;

    thead {
      background: $primary;
      color: #ffffff;

      th {
        font-weight: bold;
        padding: 10px;
        text-align: left;

        &:first-of-type {
          border-top-left-radius: 4px;
        }

        &:last-of-type {
          border-top-right-radius: 4px;
        }
      }
    }
    tbody {
      td {
        border-bottom: 1px solid #ddd;
        padding: 10px;
      }
    }
  }
}

Here, we've styled the body, input, and table elements to make them look better. We've also added some responsive styles that adjust the width of the search input for smaller screens. Feel free to modify the styles to fit your needs!

JavaScript Functionality

Now, let's add some JavaScript functionality to our search bar. We'll add an event listener to the input element that will listen for changes in the input value. Whenever the input value changes, we'll filter the products array and display the filtered results in the table.

Here's an example JavaScript code that we can use:

// Define the products array with name, description, and price properties
const products = [
  { name: "Product 1", description: "Description 1", price: "$10.00" },
  { name: "Product 2", description: "Description 2", price: "$20.00" },
  { name: "Product 3", description: "Description 3", price: "$30.00" }
];

// Get the search input element and product table element from the HTML
const searchInput = document.querySelector("#search-input");
const productTable = document.querySelector("#product-table tbody");

// Add an event listener to the search input element to listen for input events
searchInput.addEventListener("input", () => {
  // Get the query string from the search input element, and convert to lowercase
  const query = searchInput.value.trim().toLowerCase();
  // Filter the products array based on the query string
  const filteredProducts = products.filter((product) =>
    product.name.toLowerCase().includes(query)
  );
  // Call the renderProducts function to render the filtered products
  renderProducts(filteredProducts);
});

// Define the renderProducts function to render the products into the product table
const renderProducts = (products) => {
  // Map each product in the products array to an HTML string, and join the strings together
  const html = products
    .map(
      (product) => `
    <tr>
      <td>${product.name}</td>
      <td>${product.description}</td>
      <td>${product.price}</td>
    </tr>
  `
    )
    .join("");
  // Set the inner HTML of the product table to the HTML string
  productTable.innerHTML = html;
};

// Call the renderProducts function initially with the full products array to render all products
renderProducts(products);

In this code, we've defined an array of products with their name, description, and price. We've also selected the search input and table elements using document.querySelector.

Next, we've added an event listener to the search input that listens for changes to the input value. Whenever the value changes, we filter the products array based on the search query and render the filtered results using the renderProducts function.

The renderProducts function takes an array of products and generates an HTML string for each product using the map method. We then join the array of HTML strings using join and set the innerHTML property of the table body element to the generated HTML string.

Conclusion

And there you have it! With this code, you can easily implement a typeahead feature using pure JavaScript. By following this tutorial, junior developers can learn how to create a simple yet powerful search feature that will improve the user experience of your web application. With some CSS styling, you can make the search feature look beautiful and intuitive, while the JavaScript code handles the functionality behind the scenes. Happy coding!

You can find a working example here: View CodePen