M/s VIKASH TECH - We Write Imaginations to Codes..!!

Search Bar with Autocomplete Search Suggestions in JavaScript

Hello readers, Today in this blog you’ll learn how to create a Search Bar with Auto-complete Search Suggestions using HTML CSS & JavaScript.
A search box is a graphical UI element present in many websites. It works as the field for a query input or searches term from the user to search and retrieve related information from the database. Autocomplete is a pattern or feature used to display query suggestions and predicts the rest of a word a user is typing.
In this program [Search Bar with Auto-complete Search Suggestions], on the webpage, there is a search bar and when you type something, there is shown a autocomplete box that suggests several predictions of how your query could be completed means there are shown several suggestions related your query.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com


<!DOCTYPE html>
<!-- Created By praveen kumar - www.vikashtech.com -->
<html lang="en" dir="ltr">
    <meta charset="utf-8">
    <!-- <title>Autocomplete Search Box | VikashTech</title> -->
    <link rel="stylesheet" href="blog.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <div class="wrapper">
      <div class="search-input">
        <a href="" target="_blank" hidden></a>
        <input type="text" placeholder="Type to search..">
        <div class="autocom-box">
          <!-- here list are inserted from javascript -->
        <div class="icon"><i class="fas fa-search"></i></div>

     <script src="suggestion.js"></script> 
     <script src="script.js"></script> 



@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;

  background: #644bff;
  padding: 0 20px;

  color: #fff;
  background: #664AFF;

  max-width: 450px;
  margin: 150px auto;

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

.search-input input{
  height: 55px;
  width: 100%;
  outline: none;
  border: none;
  border-radius: 5px;
  padding: 0 60px 0 20px;
  font-size: 18px;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.1);

.search-input.active input{
  border-radius: 5px 5px 0 0;

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

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

.autocom-box li{
  list-style: none;
  padding: 8px 12px;
  display: none;
  width: 100%;
  cursor: default;
  border-radius: 3px;

.search-input.active .autocom-box li{
  display: block;
.autocom-box li:hover{
  background: #efefef;

.search-input .icon{
  position: absolute;
  right: 0px;
  top: 0px;
  height: 55px;
  width: 55px;
  text-align: center;
  line-height: 55px;
  font-size: 20px;
  color: #644bff;
  cursor: pointer;

script.js file

// getting all required elements
const searchWrapper = document.querySelector(".search-input");
const inputBox = searchWrapper.querySelector("input");
const suggBox = searchWrapper.querySelector(".autocom-box");
const icon = searchWrapper.querySelector(".icon");
let linkTag = searchWrapper.querySelector("a");
let webLink;

// if user press any key and release
inputBox.onkeyup = (e)=>{
    let userData = e.target.value; //user enetered data
    let emptyArray = [];
        icon.onclick = ()=>{
            webLink = "https://www.google.com/search?q=" + userData;
            linkTag.setAttribute("href", webLink);
        emptyArray = suggestions.filter((data)=>{
            //filtering array value and user characters to lowercase and return only those words which are start with user enetered chars
            return data.toLocaleLowerCase().startsWith(userData.toLocaleLowerCase()); 
        emptyArray = emptyArray.map((data)=>{
            // passing return data inside li tag
            return data = '<li>'+ data +'</li>';
        searchWrapper.classList.add("active"); //show autocomplete box
        let allList = suggBox.querySelectorAll("li");
        for (let i = 0; i < allList.length; i++) {
            //adding onclick attribute in all li tag
            allList[i].setAttribute("onclick", "select(this)");
        searchWrapper.classList.remove("active"); //hide autocomplete box

function select(element){
    let selectData = element.textContent;
    inputBox.value = selectData;
    icon.onclick = ()=>{
        webLink = "https://www.google.com/search?q=" + selectData;
        linkTag.setAttribute("href", webLink);

function showSuggestions(list){
    let listData;
        userValue = inputBox.value;
        listData = '<li>'+ userValue +'</li>';
        listData = list.join('');
    suggBox.innerHTML = listData;

suggestion.js file

let suggestions = [
    "YouTube Channel",
    "Facebook Page",
    "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?",
Category :


No comments found.

Leave a Reply



Latest Posts

telegram bot

How to send message via Telegram Bot using PHP - Telegram API

Telegram is a great platform for chat and communication purposes. Having a large community and large user base, it is…

SuiteCRM, an open source tool for startups to use from an early stage.

When we talk about businesses in their early stage, it's quite a big deal to choose good management and sales…

How to Implement Google QAuth Authentication | Google Login - PHP MySQL

PHP Google OAuth API allows users to login into a website with their Google credentials. A user with a Google…

How to use Google Two Factor Authentication in your project?

At our end we take security at a priority, implementation of different ways to secure website should be the priority…

%d bloggers like this: