How To Build a Website Search Bar with JavaScript

A search bar is one of the most common features on any website. So common in fact, that you’d be hard-pressed to find a website that deals with data in one form or another and doesn’t have a search bar. Even the most visited webpage in the world consists almost entirely of a search bar:

A screenshot of the google.com landing page

With that being said, in this tutorial we’ll learn how to implement a basic website search bar with Javascript and search function to filter a list of articles.

1. HTML markup

This demo reuses the layout from two previous tutorials. These tutorials also discuss how the data is fetched and displayed and how the styling and layout is setup.

For our updated layout, we’ll be adding an HTML search bar to the header element and an element to hold the text for the search results so this is what the HTML markup looks like:


     class="search-bar"https://webdesign.tutsplus.com/>
       id="search" type="search" placeholder="🔍 Start typing to search..." />
    


 class="container"https://webdesign.tutsplus.com/>
     class="search-display"https://webdesign.tutsplus.com/>
    
     class="posts-container"https://webdesign.tutsplus.com/>


We use the type="search" to ensure the semantic nature of our input field. It also provides an inbuilt clear search button.

Search field being cleared — Search field cleared on click

Another feature we can include in our HTML markup is a list of search suggestions that appear in a dropdown when the user clicks on the search input field. This can be achieved using the element and list attribute:

Dropdown of suggestions shown in search input

2. Styling with CSS

This website search demo uses the same styling from the previously listed tutorials with a few additions: we’ve updated the header to be sticky so the search bar is always at top while scrolling, and hidden the default styling for the input list field.

header {
  position: sticky;
  top: -54px; /* value to scroll past the logo so just the search bar is sticky */
  z-index: 2;
}

.search-bar {
  display: flex;
  justify-content: center;
  padding: 24px;
}

.search-bar input {
  width: 50%;
  min-width: 300px;
  padding: 12px 24px;
  border-radius: 24px;
  font-size: 16px;
  border: 0px;
  outline: none;
}

.search-bar [list]::-webkit-list-button,
.search-bar [list]::-webkit-calendar-picker-indicator {
  display: none !important;
}

3. Website search functionality with JavaScript

We’ll be using the Fetch API to retrieve mock data scraped from the Tuts+ authors page and stored in a Github gist and then appending it to the page. The logic behind this is explained in this tutorial How to Filter Data on a Webpage (with JavaScript) and this is what the code looks like:

let postsData = ""https://webdesign.tutsplus.com/;
const postsContainer = document.querySelector("https://webdesign.tutsplus.com/.posts-container"https://webdesign.tutsplus.com/);

fetch(
  "https://webdesign.tutsplus.com/https://gist.githubusercontent.com/jemimaabu/564beec0a30dbd7d63a90a153d2bc80b/raw/0b7e25ba0ebee6dbba216cfcfbae72d460a60f26/tutorial-levels"
).then(async (response) => {
  postsData = await response.json();
  postsData.map((post) => createPost(post));
});

const createPost = (postData) => {
  const { title, link, image, categories } = postData;
  const post = document.createElement("https://webdesign.tutsplus.com/div"https://webdesign.tutsplus.com/);
  post.className = "https://webdesign.tutsplus.com/post"https://webdesign.tutsplus.com/;
  post.innerHTML = `
      ${link}" target="_blank">
        <img decoding="async" class="post-image" src="https://webdesign.tutsplus.com/&lt;/span&gt;&lt;span style=" color:="" data-eio="l" />${image}">
      
      
        ${title}
        
          ${categories
            .map((category) => {
              return "https://webdesign.tutsplus.com/' + category + "https://webdesign.tutsplus.com/"https://webdesign.tutsplus.com/;
            })
            .join(""https://webdesign.tutsplus.com/)}
        
      
  `;

  postsContainer.append(post);
};

Now we can get to the search logic.

Input listener

First, we’ll add an input listener to the search field to detect when text is being typed. When working with event listeners, it’s considered best practice to control how many times the event is called. We can do that using our debounce function.

const search = document.getElementById("https://webdesign.tutsplus.com/search"https://webdesign.tutsplus.com/);

let debounceTimer;
const debounce = (callback, time) => {
  window.clearTimeout(debounceTimer);
  debounceTimer = window.setTimeout(callback, time);
};

search.addEventListener(
  "https://webdesign.tutsplus.com/input"https://webdesign.tutsplus.com/,
  (event) => {
    const query = event.target.value;
    debounce(() => handleSearchPosts(query), 500);
  },
  false
);

In this function, we call the handleSearchPosts function inside our debounce function with a debounce time of 500ms. Next we’ll define the logic inside the handleSearchPosts() function.

Format the input

When working with user input, it’s a good idea to format the input in some way to prevent unpredictable results. In the case of our search input, we’ll be removing any extra whitespace and also only returning search results for input with more than one character. We’ll also convert the function to lowercase to prevent any case sensitive results. This is what the function looks like so far:

const handleSearchPosts = (query) => {
  const searchQuery = query.trim().toLowerCase();
  
  if (searchQuery.length <= 1) {
    return
  }
}

Fetch the right data

Next, we want to handle fetching the right data based on the query. We’ll be returning any post where the title or category text contains the query:

  let searchResults = [...postsData].filter(
    (post) =>
      post.categories.some((category) => category.toLowerCase().includes(searchQuery)) ||
      post.title.toLowerCase().includes(query)
  );

The post categories is an array so we use the some() method to return any matches and the .includes() method to check if the string contains the query . The includes method is case sensitive so we convert the post category and title to lowercase before searching.

Update displayed text

Now we’ve gotten our search results, we can update the search display text to display text based on the results returned:

const searchDisplay = document.querySelector("https://webdesign.tutsplus.com/.search-display"https://webdesign.tutsplus.com/);

if (searchResults.length == 0) {
    searchDisplay.innerHTML = "https://webdesign.tutsplus.com/No results found"
} else if (searchResults.length == 1) {
    searchDisplay.innerHTML = `1 result found for your query: ${query}`
} else {
    searchDisplay.innerHTML = `${searchResults.length} results found for your query: ${query}`
}

Append results

Then we append our search results on the page using the createPost() function.

1	postsContainer.innerHTML = ""https://webdesign.tutsplus.com/;
2	searchResults.map((post) => createPost(post));

We want to be able to reset the page to its default state when the user clears the input field. We can do this by defining a resetPosts() function and calling it in our handleSearchPosts() function

const resetPosts = () => {
  searchDisplay.innerHTML = ""
  postsContainer.innerHTML = ""https://webdesign.tutsplus.com/;
  postsData.map((post) => createPost(post));
};


const handleSearchPosts = (query) => {
  const searchQuery = query.trim().toLowerCase();
  
  if (searchQuery.length <= 1) {
    resetPosts()
    return
  }
  
  let searchResults = [...postsData].filter(
    (post) =>
      post.categories.some((category) => category.toLowerCase().includes(searchQuery)) ||
      post.title.toLowerCase().includes(searchQuery)
  );
  
  if (searchResults.length == 0) {
    searchDisplay.innerHTML = "https://webdesign.tutsplus.com/No results found"
  } else if (searchResults.length == 1) {
    searchDisplay.innerHTML = `1 result found for your query: ${query}`
  } else {
    searchDisplay.innerHTML = `${searchResults.length} results found for your query: ${query}`
  }

  postsContainer.innerHTML = ""https://webdesign.tutsplus.com/;
  searchResults.map((post) => createPost(post));
};

And that’s all she wrote

With this, we have our simple search bar completely set up!

<br />

Source link

Hosting Discounts

cloudways Discount
August 21, 2022
Hostinger Discount
August 21, 2022
DreamHost Discount
August 31, 2020

Web hosting is a confusing it's hard to know where to start. That's why we created a payless.host show you the best providers available.