Advanced Search Suggestions for Improved User Experience

An autocomplete text box in JavaScript is a feature that allows users to easily find and select options from a predefined list of suggestions as they type in a text input field. It's commonly used in e-commerce websites or search engines to enhance the user experience and improve the efficiency of search queries.

As the user types in the search box, the JavaScript code uses AJAX requests to fetch a list of relevant suggestions from a database or an API in real-time. The suggestions are then displayed in a dropdown menu, which updates dynamically as the user types in more characters.

Source Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auto Complete Text Box</title>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" />
  </head>
  <body>
    <nav>
      <div class="logo">Tutor Joe's</div>
      
      <div class="search-box">
        <div class="row">
          <input type="text" id="searchText" autocomplete="off" placeholder="Search Text Here.." />
          <button><i class="fa fa-search"></i></button>
        </div>
        <div class="suggest-box">
          <!-- <ul>
            <li>HTML Bootcamp</li>
            <li>CSS Complete Tutorial</li>
            <li>Full Stack</li>
          </ul> -->
        </div>
      </div>
    </nav>
    <script src="js/script.js"></script>
  </body>
</html>

css/style.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background-color: palegoldenrod;
  color: #333;
}

nav {
  width: 100%;
  min-height: 50px;
  background-color: #2f3640;
  color: #fff;
  padding: 10px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 25px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  color: palegoldenrod;
}

.search-box {
  width: 350px;
  background-color: #fff;
  border-radius: 2px;
  position: relative;
}

.search-box .row {
  display: flex;
  align-items: center;
  padding: 0px 5px;
}

input {
  flex: 1;
  height: 30px;
  border: none;
  outline: none;
  font-size: 14px;
  color: #333;
}

button {
  background: transparent;
  border: 0;
  outline: 0;
}
button .fa {
  font-size: 14px;
  color: #736f6f;
  cursor: pointer;
}
.suggest-box {
  position: absolute;
  width: 100%;
  max-height: 300px;
  background-color: #fff;
  overflow-y: scroll;
}

.suggest-box ul {
  border-top: 1px solid #999;
  padding: 15px 10px;
}

.suggest-box ul li {
  list-style: none;
  color: #333;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  display: block;
  padding: 6px 2px;
}

.suggest-box ul li:hover {
  background-color: #e9f3ff;
}

::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background-color: #2f3640;
  border-radius: 8px;
}

@media (max-width: 600px) {
  nav {
    flex-direction: column;
  }
  .search-box {
    margin-top: 10px 0px;
  }
}

js/script.js

const suggestBox = document.querySelector(".suggest-box");
const inputBox = document.querySelector("#searchText");

inputBox.addEventListener("keyup", filterSuggesstions);

inputBox.addEventListener("click", () => {
  inputBox.select();
});

async function filterSuggesstions() {
  const response = await fetch("./data/data.json");
  const KeywordsList = await response.json();
  let suggest = [];
  let input = this.value.trim();
  if (input.length) {
    suggest = KeywordsList.filter((keyword) => {
      return keyword.search.toLowerCase().includes(input.toLowerCase());
    });
  }
  display(suggest);

  if (!suggest.length) {
    suggestBox.innerHTML = "";
  }
}

function display(suggest) {
  const content = suggest.map((list) => {
    return `<li onclick='selectInput(this)'>${list.search}</li>`;
  });
  suggestBox.innerHTML = `<ul>${content.join("")}</ul>`;
}

function selectInput(list) {
  inputBox.value = list.innerHTML;
  suggestBox.innerHTML = "";
}

data/data.json

[
  {
    "search": "How to learn web development"
  },
  {
    "search": "JavaScript frameworks"
  },
  {
    "search": "CSS tips and tricks"
  },
  {
    "search": "Front-end vs. Back-end development"
  },
  {
    "search": "Responsive web design"
  },
  {
    "search": "How to use Git for web development"
  },
  {
    "search": "Web development bootcamps"
  },
  {
    "search": "Web accessibility guidelines"
  },
  {
    "search": "Progressive Web Apps"
  },
  {
    "search": "UI/UX design for the web"
  },
  {
    "search": "React.js tutorial"
  },
  {
    "search": "Node.js frameworks"
  },
  {
    "search": "PHP best practices"
  },
  {
    "search": "SEO for websites"
  },
  {
    "search": "Web performance optimization"
  },
  {
    "search": "GraphQL API design"
  },
  {
    "search": "WordPress theme development"
  },
  {
    "search": "Web security best practices"
  },
  {
    "search": "jQuery plugins"
  },
  {
    "search": "CSS grid layouts"
  },
  {
    "search": "Web animations with CSS and JavaScript"
  },
  {
    "search": "Web scraping with Python"
  },
  {
    "search": "WebRTC video chat implementation"
  },
  {
    "search": "Responsive images"
  },
  {
    "search": "Debugging web applications"
  },
  {
    "search": "Web development trends in 2023"
  },
  {
    "search": "Bootstrap responsive design"
  },
  {
    "search": "Python web development frameworks"
  },
  {
    "search": "RESTful API design"
  },
  {
    "search": "Web accessibility testing"
  },
  {
    "search": "JavaScript design patterns"
  },
  {
    "search": "React Native app development"
  },
  {
    "search": "CSS preprocessors"
  },
  {
    "search": "Web performance metrics"
  },
  {
    "search": "Web development tools for Mac"
  },
  {
    "search": "WordPress plugin development"
  },
  {
    "search": "Web design trends in 2023"
  },
  {
    "search": "Database design for web applications"
  },
  {
    "search": "User authentication and authorization"
  },
  {
    "search": "JavaScript testing frameworks"
  },
  {
    "search": "Web hosting providers"
  },
  {
    "search": "Web development for mobile devices"
  },
  {
    "search": "React Native vs Flutter"
  },
  {
    "search": "Web scraping tools"
  },
  {
    "search": "Ruby on Rails tutorial"
  },
  {
    "search": "Web design principles"
  },
  {
    "search": "JavaScript data visualization"
  },
  {
    "search": "Vue.js components"
  },
  {
    "search": "Web typography best practices"
  },
  {
    "search": "Web application architecture"
  },
  {
    "search": "React Native app performance"
  },
  {
    "search": "CSS flexbox layouts"
  },
  {
    "search": "ASP.NET web development"
  },
  {
    "search": "Web accessibility audit"
  },
  {
    "search": "Web animations using SVG"
  },
  {
    "search": "Web development podcasts"
  },
  {
    "search": "Responsive web design frameworks"
  },
  {
    "search": "JavaScript unit testing"
  }
]

This type of search box can also include predictive search functionality that suggests search terms based on the user's previous search history or popular search terms. The autocomplete text box in JavaScript provides a faster, more user-friendly way for users to find what they're looking for on a website, making it an essential feature for modern web applications.

Output

Live Preview