• 12 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 9/3/20

Customize Functionality With jQuery

Log in or subscribe for free to enjoy all this course has to offer!

Many of Bootstrap’s components use JavaScript to implement their functionality. The components’ JavaScript plugins are built on the popular jQuery library. Some of them also depend on the Popper.js library. This is why, to make sure all of the components in the page function correctly, we included both jQuery and Popper.js before including the Bootstrap.js library.  

You’ve already come across some of the components that use JavaScript in this course, such as the navbar, carousel, and alert components. When you implemented these components, you learned one of the preferred ways of using JavaScript functionality in Bootstrap, which is the data-* HTML attributes. For example, if you review the HTML for the homepage you created, you’ll see that the carousel’s main div, as well as the carousel control elements (the previous/next button elements), have data attributes to implement the JavaScript functionality. The Bootstrap documentation contains details of the available data attributes that can be used with components that use JavaScript. In the case of the carousel, you can see the options in the relevant section of its documentation page, and you can find similar details in other elements’ documentation.

Filtering Content Using jQuery

As the Space School is expecting to add many lessons to the website, they want to make it easier for the users to find lessons. So they’ve asked you to add a feature to the Lessons Listing page that allows a user to filter the lessons based on a free-text search.

As you can see from the following design, the page will have a simple input box at the top that lets users type their search term:

Lessons Listings page with search input box Lessons Listing page showing a search input box above the list of lessons
Lessons Listings page with search input box

Let’s start by adding the input box between the heading and the list of lessons:

<div class="row mb-3">
<div class="col">
<input class="form-control" id="searchInput" type="text" placeholder="Search..">
</div>
</div>

Next, add the JavaScript that will filter the list to only include lessons that contain the user’s input in the listing text. Add the following piece of JavaScript in a  <script>  tag at the end of the lessons.html page, just before the closing </body> tag:

<script>
$(document).ready(function(){
$("#searchInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#lessonList .col-12").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>

This code snippet will look for the on.(“keyup”)  event in the input box to detect when the user has typed a letter and will then filter any child elements of the #lessonList div that have a class of .col-12. This will result in only columns that contain the displayed search text and those not containing the search text having their display toggle to “none” via the jQuery toggle() function.

The final step in making this search filter work is to make sure that the  .row  div that contains the list of lessons has an id of lessonList to match the selector used in the code. 

Once you’ve made the changes to the lessons.html file, test the new function by typing text that appears in the lesson title or descriptions listed on the page (e.g., “space” or “exercise”) and the lessons will be filtered to show only those with that text.

You can take a look at the part-5/chapter-2/filter directory in the course’s Git repository for reference.

Let’s Recap!

  • Bootstrap uses JavaScript libraries to achieve its functionality.

  • Use the jQuery library to create custom functionality with Bootstrap’s classes and components.

Now that you’ve learned how to use jQuery to customize the functionality of your Bootstrap website, you’re ready to start applying what you’ve learned to your projects!

Example of certificate of achievement
Example of certificate of achievement