CM Fast Search Filter - Use Case - How To Enable Live Search Filter On Your Site

Use Case – How to enable live search filter on your site

Back to User Guides

Introduction

The CM Fast Live Search Filter plugin allows you to easily add a live search to your admin dashboard and to selected posts on your WordPress site. You can add the fast live search to lists or tables either by creating a rule or by adding a shortcode.

Use Case Assumptions

In this example use case guide we will consider how to enable fast live search for the dashboard on the back-end and for selected posts or pages on the front-end.

We consider that you have already bought the plugin, but not installed it yet. 

It follows:

• Installing the plugin
• Dashboard filters
• Search on the front-end using the shortcode
  • Search in lists
  • Search in tables
  • Shortcode additional parameters
• Targeting existing pages - creating rules
• End result

Installing the Plugin

The process is the same for all CM plugins and add-ons.

• Download the plugin from your customer dashboard
• Log in to WordPress and navigate to the WordPress Admin → Plugins settings
• Click on Add New
• Activate it and add the license

Learn more: Getting Started - Plugin Overview

Dashboard Filters

Let's start with enabling the search filter on the dashboard of your site back-end. 

To do this, navigate to Admin Dashboard → CM Fast Live Search Filter → Options. 

Head to the Admin rules tab.

The plugin comes with five already set search filters for:

• Plugins
• Posts and Pages
• Categories and Tags
• Comments
• Users

This means that once you view one of these dashboards, you can filter the content on the same page of results as you are typing your search query.

You can control which dashboards can use the fast search filter by visiting the plugin options and changing the rules set for the admin dashboard. 

Search On the Front-end Using the Shortcode

Search on the front-end can be enabled for lists and tables. When building your HTML table (<table> tag) or list (<ul> tags), you can add a shortcode that will place a fast search filter before the list or table and allow users to filter the content.

This is done by using the plugin shortcode: [cm_fast_live_search_filter]  with the parameter container_selector that should pass the value of the class or id.

If your table or list uses class (eg, class="example"), then you need to pass the value with the point before it, eg ".example". So, the result shortcode should look like this: [cm_fast_live_search_filter container_selector=".example"]

If your table or list uses id (eg, id="example"), then you need to pass the value with the # symbol before it, eg "#example". So, the result shortcode should look like this: [cm_fast_live_search_filter container_selector="#example"]

Also, working with tables has a little nuance - we will talk about it a bit later.

Search In Lists

For example, your code includes the list with clients' names:

<ul class="listclass"> <li>Alan Wake</li> <li>Bill Carter</li> <li>Bruce Grey</li> <li>Daisy Daysun</li> <li>Jack Jackson</li> <li>Jack Gibbson</li> <li>James Smith</li> <li>John Knight</li> <li>Rowan Benson</li> <li>Robert Butler</li> <li>Thomas Anderson</li> </ul>

Placing the shortcode with the following parameter  [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.

Search In Tables

The same can be achieved with tables. The small nuance that we've said earlier is that 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, like this:

container_selector=".example tbody" or container_selector="#example tbody"

So, for example, we have a table with the list of Nike sneakers and prices.

If the table has the id="niketable", then the shortcode will look like this:

[cm_fast_live_search_filter container_selector="#niketable tbody"]

Shortcode Additional Parameters

The shortcode has a few additional parameters:

• background - Color of the search field background (color name e.g. yellow, or hex color representation e.g. #00FF00).
• placeholder - Short hint that is displayed in the search field before the user enters a value.
• id - CSS ID added to the search field.
• class - CSS class name added to the search field.

Targeting Existing Pages - Creating Rules

Another way for enabling a search filter in the post is to create a rule for it in plugin options. This way can be useful in case, if your page or post already has a regular search field defined. For example:

This list with a regular search field on the front-end:

Navigate to Admin Dashboard → CM Fast Live Search Filter → Options. 

To create a new rule, click the button Add new rule under the Frontend rules section.

There will appear a form, where you need to fill the following fields:

1. Filter input selector - Here you need to put the class or ID name of the input search field. In our example the input field has the ID="searchclient". So we need to put "searchclient" into the field.

   

2. Container selector - Here you need to put the class or ID name of a list or table. In our example we have a list that has the class="clients". So we need to put ".clients" into the field.

   

3. On Page / URL - Here you need to choose a post or page where the live search field will be enabled. You can select the option page and choose needed post or page in the dropdown. Or you can select the option URL and enter the slug of the target page. Let's choose for our example the option URL and input there the slug of our post: "list-of-clients".

   

4. Filter input background - Choose the color of the search field.
5. Placeholder - Enter here the text that will be displayed in the search field before the user starts typing the search query. Let's put here "Search for a client".
6. Enabled - You can uncheck this option, if you want to disable the rule.
7. Delete this rule - Click it, if you want to delete the rule.

As a result, the form will be filled in the following way for our example:

Don't forget to click the button Save Changes. You can add any number of rules by clicking on the button Add new rule.

End Result

Following instructions found in the plugin and guides you should be able to enable fast live search for the dashboard on the back-end and for selected posts or pages on the front-end.

	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