CM Fast Search Filter - Search Tables or Lists Within on the Frontend (Shortcode)

Search Tables or Lists Within Pages on the Frontend

Back to User Guide

TIP: What Are Shortcodes

Shortcodes add dynamic content to your site via a small piece of code.

Learn more: Shortcodes - How To Use | Finding ID of Post/Page/Other Content

When building your HTML table (table tag) or list (ul tags), you can add a shortcode that will place a fast search filter on front of the list or table and allow users to filter the content

This is done by using the plugin shortcode   [cm_fast_live_search_filter container_selector="( <a href="">jQuery</a>selector)"]


As for example if your code includes the list: 

<ul class="listclass">
<li>First Line</li>
<li>Second Line</li>
<li>Third Line</li>
<li>Fourth Line</li>

Placing the shortcode with the following param: 

  [cm_fast_live_search_filter container_selector=".listclass"] will show a fast search filter above this list on your post and let users filter the results

and once starting to type the results will look like this


The same can be achieved with tables.

Update Information

Some tables use the tag <tbody> and some of them don't. But, not depending on if you use this tag or not, the modern browsers automatically add the tag <tbody> to tables on the front-end. So, we also need to pass tbody to the container_selector.

Let's consider the example with the table that use class tag:

[cm_fast_live_search_filter container_selector=".filtertest tbody"]
<table class="filtertest">
and the result will look like this 


If you are using an id instead of a class, the shortcode should have the following # mark:

[cm_fast_live_search_filter container_selector="#filtertest tbody"]
<table id="filtertest">

Shortcode Additional Params

You can also use the following params in the shortcode allowing you to control the background color of the search filter and also the placeholder text

  • background — color of the filter input background (color name e.g. yellow, or hex color representation e.g. #00FF00)
  • placeholder — short hint displayed in the input field before the user enters a value
  • id — css id added to filter input
  • class — css class name added to filter input

More information about the CM Fast Live Search Filter WordPress  Plugin

Other WordPress products can be found at CreativeMinds WordPress Store

Let us know how we can Improve this Product Documentation Page

To open a Support Ticket visit our support center
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.