@birgilio/search-bar v1.0.0

SearchBar Class

The SearchBar class is designed to create a customizable search bar component that can be easily integrated into web applications. It allows users to filter through a list of items based on the provided search query.

Constructor

javascriptCopy code

 constructor(container, options, callback)

• container: The DOM element to which the search bar will be appended.
• options: An object containing configuration options for the search bar.
  • filter: An array of items to be filtered.
  • styles: Custom CSS styles for the search bar (optional).
  • filterProperty: The property of each item to filter on.
  • triggerWhen: Event trigger for updating search results (click, keyup, or keydown).
• callback: A function to be called whenever the search results are updated.

Static Method

javascriptCopy code

static async getData(url)

• url: The URL from which to fetch data.
• Returns: A promise that resolves to the JSON data fetched from the specified URL.

Methods

updateSearchResults(value_search)

Asynchronously updates the filtered results based on the provided search query.

• value_search: The search query to filter the items.

createSearchBar()

Creates and appends the search bar HTML elements to the specified container.

Event Handling

The behavior of the search bar can be customized based on the triggerWhen option provided in the constructor.

• If triggerWhen is set to "click", the search button triggers the search.
• If triggerWhen is set to "keyup", search results are updated as the user types.
• If triggerWhen is set to "keydown", search results are updated after a key is pressed.

Usage

javascriptCopy code

async function Search() {
    const data = await SearchBar.getData(url);
    const searchBar = new SearchBar(container, {
      filter: data.items,
      filterProperty: "title"
    }, () => {
      const results = searchBar.Results();
      console.log(results)
    });
    searchBar.createSearchBar();
}
Search();

This function demonstrates how to use the SearchBar class to create a search bar, fetch data asynchronously, and update search results based on user input.