Add Simple Search to Your Site with Quicksearch and Bootstrap
WEBINAR: On-demand webcast
How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >
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
<!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 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>firstname.lastname@example.org</th> <td>123456</td> <td>445-964-1212</td> <td>http://google.com</td> </tr> <tr> <th>email@example.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
#tableusing 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.