Add Simple Search to Your Site with Quicksearch and Bootstrap

By Diogo Souza

WEBINAR: On-demand Event

Replace Oracle with the NoSQL Engagement Database: Why and how leading companies are making the switch REGISTER >

When you display a set of information in the form of tables or lists to the user, you usually need to allow queries to be made about those records in order to find one or more desired items. In web applications, this type of functionality is usually implemented with JavaScript in HTML pages, enabling the user to enter the text by which to filter the records and to obtain the result instantly, without having to submit a search form to the server.

Searching features are, undoubtedly, one of the main functions that an application (especially those that are web-based) must provide. More than that, it needs to be truly useful, optimized and unique to retain users.

In this article we'll see how to use Quicksearch, a plugin developed on top of the jQuery library, that facilitates the implementation of querying functionalities in lists, tables, among other HTML elements. In addition, we will use Bootstrap framework to customize the appearance of page elements.

Setting up the Project

In order to use the CSS and JavaScript features of Bootstrap, jQuery and Quicksearch, you need to import the .css and .js files for each library. This can be done by downloading the files from their official websites and saving them to your project directory, or by referencing the Content Delivery Network (CDN) URLs for each component. In this article, we will choose to refer directly to the CDNs, as shown in the following code:

<!doctype html>
<html>
	<head>
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <title>Quicksearch + Bootstrap</title>
	  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.3.1/jquery.quicksearch.js"></script>
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
	</head>
	<body>

	</body>
</html>

Let's take a look at what this code does:

  • Imports the jQuery library before Bootstrap and Quicksearch, since they depend on that library to function properly
  • Imports the Bootstrap JavaScript File
  • Imports the JavaScript file of the Quicksearch plugin
  • Imports the Bootstrap CSS file

Configuring the Items for Querying

To perform the query you must insert an input of text type, in which the user can type what he/she wishes to consult in the table, list, etc. Here, along with the input, we will also create a div and use the Bootstrap classes to customize the appearance of the controls, as shown below:

<div class="form-group input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
  <input name="query" id="txt_query" placeholder="Search" type="text" class="form-control">
</div>

Next, we need to add the data that will be filtered. Here, we will create a table with some lines containing email, ID, telephone and URL, plus some Bootstrap classes that will also be used to change its layout. In the following code, we have the HTML for this table:

<table id="table" class="table table-hover">
 <thead>
     <tr>
         <th>Email</th>
         <th>Id</th>
         <th>Telephone</th>
         <th>URL</th>
     </tr>
 </thead>
 <tbody>
     <tr>
         <th>hello@aol.com</th>
         <td>123456</td>
         <td>445-964-1212</td>
         <td>http://google.com</td>
     </tr>
 
     <tr>
         <th>john@gmail.com</th>
         <td>12346</td>
         <td>445-964-9543</td>
         <td>http://yahoo.com</td>
     </tr>
 </tbody>
</table>

After adding the input and the table with some data, we can open the page in the browser to verify the result so far, which should be similar to that shown in the figure below:

Implementing the Search

To actually activate the search functionality, simply call the Quicksearch function from the previously created input and pass as a parameter the elements to be filtered. In the example we are developing, we first need to select the input using jQuery and, from there, call the Quicksearch function, passing as a parameter the table to be filtered, as seen in the following code:

<script>
  $('input#txt_query').quicksearch('table#table tbody tr');
</script>

Let's see what this code does:

  • Lines 1 to 3: this script, that is required to load the plugin, should be inserted at the end of the document immediately above the closing of the body tag;
  • Line 2: jQuery code for loading the plugin. We pass as parameter the tr element of the table element whose id is #table using the selector table#table tbody tr

Here, in addition to informing that the search will be done on the table, we need to further specify that this will occur in the data that is contained in the rows (tr) inside the body of the table (tbody).

Once this is done, entering a text in the input txt_query, the query itself will be done in all the columns and rows of the table. Thus, lines that do not fit the filter will be hidden, keeping only the ones containing the search term visible.

The "quicksearch" function also offers other settings for more elaborate queries. To learn more, go to the official site of the plugin.

About the Author

Diogo Souza works as Java Developer at Fulcrum Worldwide and has worked for companies such as Indra Company, Atlantic Institute and Ebix LA. He is also an Android trainer, speaker at events on Java and mobile world and a DevMedia consultant.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date