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

Search Tables or Lists Within Pages on the Frontend

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="https://www.cminds.com/glossary/jquery/">jQuery</a>selector)"]

Lists

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>
</ul>

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

Tables

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"]

and the result will look like this

Example

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"]

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