Create a Search Filter

Adding a Search filter to your Solodev content allows users to query your content for certain terms and display entries that contain the relevant query. This makes it easier for users to find the content they are looking for on your website.

Allowing users to search your content, in addition to categorical and date filtering, enables you to provide an optimal user experience so users can quickly access the content they're looking for.

Step 1

Add any customization you'd like to the search filter using any of the optional parameters shown below.

Parameters:

 

ParameterDescription
[class] (optional) Add class to your input field
[id] (optional) Add ID to your input field
[button_id] (optional) Add ID to your search button
[button_class] (optional) Add class to your button
[button_text] (optional) Add text to your button

Step 2

Copy and paste the code below to the webpage where you'd like to enable search filtering.

<div class="row">
<div class="col-md-4">
[search_filter]
</div>
</div>

Step 3

Add the following CSS to professionally style your search input and button.

.blog-page.filter-bar {
margin-bottom: 20px;
}
.blog-page.filter-bar .selectize-input {
height: 40px !important;
line-height: 22px;
border-radius: 0;
}
.blog-page.filter-bar .blog_search .input-group-btn #searchBtn {
padding: 10px 20px;
background-color: #00bff3;
height: inherit;
}
.selectize-input.items {
border-radius: 0;
}
.blog-page.filter-bar .blog_search input#table_filter {
height: 40px;
border-radius: 0;
line-height: 22px;
border-color: #ccc;
}

Step 4

The search input and button will populate as shown below, allowing users to query your content.

Below is the search feature we have created on a live website built in Solodev CMS.

0 Comments

Please sign in to leave a comment.
Have more questions? Submit a request