Autocomplete Search Box in HTML CSS and JavaScript

Hey everybody, today we are going to learn how to make an Autocomplete Search Box in HTML CSS and JavaScript. I know you’ve seen different types of Autocomplete Searches, but I’m going to share with you a unique feature-based project. Within the realm of internet growth, making a seamless and intuitive person’s expertise is paramount. One option to obtain that is by implementing an autocomplete search field on your website.

This function not only makes looking simpler for customers but in addition, provides a contact of sophistication to your website’s interface. Let’s delve into how one can combine this performance into your internet mission utilizing HTML, CSS, and JavaScript.

Earlier we dive into the technicalities, let’s grasp the idea of an autocomplete search field. Merely put, it’s a search to enter a subject that predicts and suggests related outcomes as customers kind into it. This predictive function is particularly useful for websites with huge databases or in-depth content material libraries.

Guys, before moving the codes, you can watch the video tutorial that I made. Inside the tutorial you will learn each step from scratch practically, I hope the video is helpful for you.

https://youtu.be/GMNDOqBxv_A

I hope you’ve watched the video till to end and you’ve learned something new from this tutorial. Let’s see the source codes that I mentioned on below. If you face any problem you can check your and my codes.

You May Also Like:

To assemble an autocomplete search field, we’ll make the most of the trio of HTML, CSS, and JavaScript. Right here’s a breakdown of every part’s function:

HTML: This verifies the construction of our search field. We’ll create an enter subject the place where customers can kind their queries.
CSS: Styling is essential for enhancing the visible enchantment and usefulness of our search field. CSS will assist us design its look, together with the dropdown listing that shows search options.
JavaScript: The magic occurs right here. JavaScript permits us to fetch related search options and dynamically replace the dropdown listing as customer kind.

HTML Markup: Start by making a fundamental HTML construction. Outline an enter subject the place customers can find their search queries.

<div class="wrapper">
  <div class="search-input">
    <a href="" target="_target" hidden></a>
    <input
      type="text"
      class="input-field"
      placeholder="Search Anything"
      autocomplete="off"
    />
    <div class="autobox"></div>
    <button class="btn"><i class="fas fa-search"></i></button>
  </div>
</div>

Styling with CSS: Apply CSS kinds to beautify the search field and its dropdown listing. You may customize its look to align together with your website’s theme.

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: "poppins", sans-serif;
  background-color: #1b2631;
}

.wrapper {
  max-width: 450px;
  width: 100%;
  margin: 150px auto;
}

.wrapper .search-input {
  background-color: #fff;
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 1px 5px 3px rgba(0, 0, 0, 0, 0.12);
  position: relative;
}

.search-input input {
  height: 55px;
  width: 100%;
  outline: none;
  border: none;
  border-radius: 5px;
  padding: 0 60px 0 20px;
  font-size: 18px;
}

.search-input .autobox {
  padding: 0;
  opacity: 0;
  pointer-events: none;
  max-height: 280px;
  overflow-y: auto;
}

.search-input.active .autobox {
  padding: 10px 8px;
  opacity: 1;
  pointer-events: auto;
}

.autobox li {
  list-style-type: none;
  padding: 8px 12px;
  width: 100%;
  cursor: default;
  border-radius: 3px;
  font-family: "poppins", sans-serif;
  display: none;
}

.autobox li:hover {
  background-color: #efefef;
  cursor: pointer;
}

.search-input.active .autobox li {
  display: block;
}

.btn {
  outline: none;
  border: none;
  background-color: inherit;
  border-radius: 3px;
}

.search-input .btn {
  position: absolute;
  right: 10px;
  top: 0px;
  height: 55px;
  text-align: center;
  line-height: 55px;
  font-size: 20px;
  cursor: pointer;
  color: #1b2631;
}

JavaScript Magic: That is the place where the autocomplete performance involves life. Write JavaScript code to seize person enter, fetch related search options (through AJAX requests or from a predefined dataset), and dynamically replace the dropdown listing accordingly.

"use strict";

const data = [
  "Designer",
  "Developer",
  "Web Designer",
  "Web Developer",
  "Login Form in HTML & CSS",
  "How to learn HTML & CSS",
  "How to learn JavaScript",
  "How to became Freelancer",
  "How to became Web Designer",
  "How to start Gaming Channel",
  "How to start YouTube Channel",
  "What does HTML stands for?",
  "What does CSS stands for?",
  "Python",
  "Udemy",
];

const searchWrapper = document.querySelector(".search-input");
const inputBox = document.querySelector(".input-field");
const autoBox = document.querySelector(".autobox");
const btn = document.querySelector(".btn");
const linkEl = searchWrapper.querySelector("a");
let GoogleLink;

inputBox.addEventListener("keyup", (e) => {
  let userData = e.target.value;
  let emptyArray = [];

  if (userData) {
    btn.addEventListener("click", () => {
      GoogleLink = `https://www.google.com/search?q=${userData}`;
      linkEl.setAttribute("href", GoogleLink);
      linkEl.click();
    });

    emptyArray = data.filter((para) => {
      return para.toLocaleLowerCase().startsWith(userData.toLocaleLowerCase());
    });

    emptyArray = emptyArray.map((liEl) => {
      return (liEl = "<li>" + liEl + "</li>");
    });

    searchWrapper.classList.add("active");
    showSuggestion(emptyArray);

    let alllist = autoBox.querySelectorAll("li");
    for (let i = 0; i < alllist.length; i++) {
      alllist[i].setAttribute("onclick", "select(this)");
    }
  } else {
    searchWrapper.classList.remove("active");
  }
});

function select(el) {
  let selectData = el.textContent;
  inputBox.value = selectData;
  btn.addEventListener("click", () => {
    GoogleLink = `https://www.google.com/search?q=${selectData}`;
    linkEl.setAttribute("href", GoogleLink);
    linkEl.click();
  });
  searchWrapper.classList.remove("active");
}

function showSuggestion(list) {
  let listData;
  if (!list.length) {
    let userValue = inputBox.value;
    listData = `<li> ${userValue}</li>`;
  } else {
    listData = list.join(" ");
  }
  autoBox.innerHTML = listData;
}

Dealing with Person Interactions: Implement occasion listeners to reply to person interactions reminiscent of typing, clicking, or deciding on merchandise from the dropdown listing. This ensures a seamless personal expertise.

Testing and Optimization: When you’ve applied the autocomplete search field, completely take a look at it throughout totally different browsers and gadgets. High quality-tune performance and efficiency as wanted to make sure optimum person expertise.

Improved Person Expertise: Customers can discover what they’re in search of sooner, because of predictive search options.

Environment-friendly Navigation: Navigating via in-depth content material turns simpler, resulting in elevated personal engagement.

Enhanced Professionalism: A well-designed autocomplete search field provides an expert contact to your website, enhancing its total enchantment.

In Conclusion

By incorporating an autocomplete search field into your internet mission, you’ll be able to considerably improve personal expertise and streamline content material discovery. With the fitting mix of HTML, CSS, and JavaScript, you’ll be able to create a sophisticated and intuitive search interface that leaves an enduring impression on your viewers. So, why wait? Elevate your website’s search performance at this time with the ability to autocomplete!