Building a Search Bar with Auto-Suggestions for Improved UX

byCodepen.tech -
0

Introduction

Building a Search Bar with Auto-Suggestions for Improved UX

A search bar with auto-suggestions enhances user experience by providing real-time suggestions as users type, making it easier to find relevant content. Auto-suggestions not only save users time but also guide them towards popular or relevant keywords, improving usability. This type of search bar is common on e-commerce sites, blogs, and search engines.

In this guide, we’ll walk through creating a search bar with auto-suggestions using HTML, CSS, and JavaScript.

Key Components of a Search Bar with Auto-Suggestions

  1. Search Input Field: The main input area where users type their search queries.
  2. Auto-Suggestion Dropdown: A list of suggestions that appear as the user types, based on predefined keywords or data.
  3. JavaScript Logic: Controls filtering and displaying suggestions dynamically as the user types.

Step-by-Step Guide to Building a Search Bar with Auto-Suggestions

1. Setting Up the Basic HTML Structure

We’ll start by creating a basic HTML structure for the search bar, which includes an input field and a container for suggestions.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Search Bar with Auto-Suggestions</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- Search Bar Container -->
  <div class="search-container">
    <input type="text" class="search-input" placeholder="Search..." id="search-input">
    <div class="suggestions-list" id="suggestions-list"></div>
  </div>

  <script src="scripts.js"></script>
</body>
</html>

Explanation:

  • Search Container: The .search-container div wraps the input field and suggestions list.
  • Search Input: The input field (.search-input) captures the user’s search query.
  • Suggestions List: The .suggestions-list div will display suggestions as users type, dynamically updated by JavaScript.

2. CSS for Styling the Search Bar and Suggestions

Next, we’ll style the search bar to make it user-friendly and visually appealing, with focus on making the suggestions list easy to read and navigate.


/* styles.css */

/* Basic Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Body Styling */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

/* Search Container */
.search-container {
  position: relative;
  width: 300px;
}

.search-input {
  width: 100%;
  padding: 10px;
  border: 2px solid #3498db;
  border-radius: 25px;
  outline: none;
  font-size: 1rem;
}

/* Suggestions List */
.suggestions-list {
  position: absolute;
  top: 100%;
  width: 100%;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 0 0 8px 8px;
  max-height: 200px;
  overflow-y: auto;
  display: none;
  z-index: 1000;
}

/* Suggestion Item */
.suggestion-item {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #f4f4f4;
}

.suggestion-item:last-child {
  border-bottom: none;
}

/* Hover Effect */
.suggestion-item:hover {
  background-color: #eaeaea;
}

Explanation of the CSS:

  1. Search Input Styling: The .search-input is styled with padding and a rounded border for a clean look.
  2. Suggestions List Styling: The .suggestions-list has a maximum height and overflow-y: auto for scrollability, with display: none to hide it initially.
  3. Suggestion Item Styling: Each suggestion item has padding and a hover effect to make it stand out.

3. JavaScript for Handling Auto-Suggestions

We’ll use JavaScript to filter and display suggestions based on user input. The suggestions will be sourced from an array of predefined keywords.

Example JavaScript Code:


// scripts.js

const searchInput = document.getElementById("search-input");
const suggestionsList = document.getElementById("suggestions-list");

// Sample list of keywords for suggestions
const keywords = [
  "JavaScript",
  "Java",
  "Python",
  "CSS",
  "HTML",
  "React",
  "Node.js",
  "Machine Learning",
  "Data Science",
  "Artificial Intelligence",
  "SQL",
  "MongoDB",
  "Django",
  "Flask",
  "Vue.js"
];

// Show suggestions based on input
searchInput.addEventListener("input", () => {
  const query = searchInput.value.toLowerCase();
  suggestionsList.innerHTML = "";

  if (query) {
    const filteredSuggestions = keywords.filter(keyword =>
      keyword.toLowerCase().startsWith(query)
    );

    filteredSuggestions.forEach(suggestion => {
      const suggestionItem = document.createElement("div");
      suggestionItem.classList.add("suggestion-item");
      suggestionItem.textContent = suggestion;
      suggestionsList.appendChild(suggestionItem);

      // Click on suggestion to fill input
      suggestionItem.addEventListener("click", () => {
        searchInput.value = suggestion;
        suggestionsList.innerHTML = "";
        suggestionsList.style.display = "none";
      });
    });

    suggestionsList.style.display = filteredSuggestions.length ? "block" : "none";
  } else {
    suggestionsList.style.display = "none";
  }
});

// Hide suggestions when clicking outside
document.addEventListener("click", (e) => {
  if (!e.target.closest(".search-container")) {
    suggestionsList.style.display = "none";
  }
});

Explanation of the JavaScript:

  1. Sample Keywords: The keywords array contains sample search terms for suggestions. In a live application, this could be dynamic data from a database.
  2. Filtering Suggestions: As users type, the input event listener filters the keywords array to match entries that start with the user’s input.
  3. Display Suggestions: Filtered suggestions are displayed as items in the .suggestions-list div, and each item can be clicked to autofill the search bar.
  4. Hide Suggestions: Clicking outside the search container hides the suggestions list to keep the interface clean.

4. Making the Search Bar Responsive

To ensure the search bar and suggestions list look good on all devices, add a media query to adjust the width on smaller screens.


/* Responsive Design for Search Bar */
@media (max-width: 480px) {
  .search-container {
    width: 90%;
  }
}

Explanation:

  • Responsive Width: On screens 480px or smaller, the search container will adjust to take up 90% of the screen width.

5. Adding a Focus Effect (Optional)

To enhance user experience, you can add a focus effect to make the search input field stand out when clicked.


/* Focus Effect */
.search-input:focus {
  border-color: #2980b9;
  box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

Explanation:

  • Focus Shadow: A subtle shadow and border color change provide visual feedback to users, indicating that they’re focused on the input field.

Final HTML, CSS, and JavaScript Code

Here’s the complete code with the optional styling, responsive adjustments, and auto-suggestions.

HTML:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Search Bar with Auto-Suggestions</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- Search Bar Container -->
  <div class="search-container">
    <input type="text" class="search-input" placeholder="Search..." id="search-input">
    <div class="suggestions-list" id="suggestions-list"></div>
  </div>

  <script src="scripts.js"></script>
</body>
</html>

CSS:


/* Basic Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Body Styling */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

/* Search Container */
.search-container {
  position: relative;
  width: 300px;
}

.search-input {
  width: 100%;
  padding: 10px;
  border: 2px solid #3498db;
  border-radius: 25px;
  outline: none;
  font-size: 1rem;
}

/* Suggestions List */
.suggestions-list {
  position: absolute;
  top: 100%;
  width: 100%;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 0 0 8px 8px;
  max-height: 200px;
  overflow-y: auto;
  display: none;
  z-index: 1000;
}

/* Suggestion Item */
.suggestion-item {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #f4f4f4;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover {
  background-color: #eaeaea;
}

/* Focus Effect */
.search-input:focus {
  border-color: #2980b9;
  box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

/* Responsive Design */
@media (max-width: 480px) {
  .search-container {
    width: 90%;
  }
}

JavaScript:


// scripts.js

const searchInput = document.getElementById("search-input");
const suggestionsList = document.getElementById("suggestions-list");

// Sample list of keywords for suggestions
const keywords = [
  "JavaScript", "Java", "Python", "CSS", "HTML",
  "React", "Node.js", "Machine Learning", "Data Science",
  "Artificial Intelligence", "SQL", "MongoDB", "Django", "Flask", "Vue.js"
];

// Show suggestions based on input
searchInput.addEventListener("input", () => {
  const query = searchInput.value.toLowerCase();
  suggestionsList.innerHTML = "";

  if (query) {
    const filteredSuggestions = keywords.filter(keyword =>
      keyword.toLowerCase().startsWith(query)
    );

    filteredSuggestions.forEach(suggestion => {
      const suggestionItem = document.createElement("div");
      suggestionItem.classList.add("suggestion-item");
      suggestionItem.textContent = suggestion;
      suggestionsList.appendChild(suggestionItem);

      // Click on suggestion to fill input
      suggestionItem.addEventListener("click", () => {
        searchInput.value = suggestion;
        suggestionsList.innerHTML = "";
        suggestionsList.style.display = "none";
      });
    });

    suggestionsList.style.display = filteredSuggestions.length ? "block" : "none";
  } else {
    suggestionsList.style.display = "none";
  }
});

// Hide suggestions when clicking outside
document.addEventListener("click", (e) => {
  if (!e.target.closest(".search-container")) {
    suggestionsList.style.display = "none";
  }
});

See the Pen Building a Search Bar with Auto-Suggestions for Improved UX by codepen (@codepen-the-selector) on CodePen.

Conclusion

Building a search bar with auto-suggestions is a great way to improve user experience and streamline navigation on your website. By following this guide, you’ve created a responsive search bar with real-time auto-suggestions that is both user-friendly and visually appealing. Whether used in an e-commerce store, blog, or knowledge base, this search bar design makes it easier for users to find relevant content quickly.

You may like these posts

Previous Post Next Post

نموذج الاتصال