How to implement a jQuery search box

A search box is a single-line text box that accepts user input for database searches. It’s seen on mostly every application and program across the web.

A search box can be implemented with any programming language of choice; JavaScript, Python, Java, etc, depending on the program compatibility.

jQuery search box

To implement a basic jQuery search box, follow these steps:

  • Step 1: Include jQuery in the file. Use either a content delivery network (CDN) link or download and use a local copy in your file.
<html>
 <head>
   <!-- jQuery CDN -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 </head>
 <body></body>
</html>
  • Step 2: Create the required HTML structure for the search box.
<html>
 <head>
   <!-- jQuery CDN -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 </head>
 <body>
   <!-- Search Input-->
  <input type="text" id="searchboxInput" placeholder="Search...">
  <button id="searchButton">Search</button>
   <!-- Search Result-->
  <div id="searchResult(s)"></div>
 </body>
</html>
  • Step 3: Apply styles to the search and the result container.
  • Step 4: Write the jQuery code to handle the search functionality.

Code example

Let's run the following widget and see how the steps above actually work:

Explanation

Let’s understand the jQuery code in detail.

  • Lines 6–15: Lies a dummy data saved as fruits.

  • Lines 18–20: performSearch() is tied to the button that has id #searchButton. When this button is clicked, the click event triggered.

  • Line 23–28: performSearch() is also tied to keypress event. This function runs in response to the enter key press.

  • Line 32: searchTerm stores the search box value. The value will be trimmed and changed to lowercase on its assignment.

  • Line 33: searchResults holds an empty array.

  • Lines 35–40: Holds a block of code that filters the dummy data. It searches for any data that includes the searchTerm and then assigns results to searchResults.

  • Line 42: Clears the ul tag on the page. It deletes any content it holds.

  • Lines 44–51: Holds the block of code that appends each result to the ul. Provided that searchResults is not empty; the code takes each result, puts it inside a li as the text, and then appends it to the ul on the page. It displays No results found if searchResults is empty.

jQuery typeahead search box

Let's enhance the basic search box functionality to incorporate a typeahead search feature. Instead of relying on a "search" button, we utilize the input event handler to seamlessly trigger the typeahead and search functionality.

Explanation

Let’s understand the index.js code in detail.

Lines 5–14: Defines an array of fruits containing some fruit names.

Line 17: Attach an event listener to the input field with the ID searchboxInput. This listener listens for any input event (e.g., typing).

Line 18: When the input event is triggered, we retrieve the current value of the input field and convert it to lowercase for case-insensitive matching.

Lines 22–23: We filter the fruits array based on the searchTerm.

Line 27: We empty the previous search results list (searchResultsList) to prepare for displaying the new search results.

Lines 29–38: If there are search results, we iterate over them and create list items (<li>) for each result. We also attach a click event listener to each list item, which sets its text as the value of the search box and sets the text content of the searchResults element to the result string.

Lines 39–41: If there are no search results, we display No results found in the search results list if the search term is not empty; otherwise, we clear the search results list.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved