CM Fast Search Filter - Shortcode

Search tables or lists within pages on the frontend

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=”( jQuery selector)”]

As for example if your code includes the following 

<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

The same can be achieved with tables as show in this this example

[cm_fast_live_search_filter container_selector=".filtertest"]
<table class="filtertest">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
</table>
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"]
<table id="filtertest">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
</table>

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