A Brief Overview:

cleanSearch is actually two stacks that work together. The first is the search bar. It contains all of the customization options, and controls the text input field, as well as an icon, and the drop-down suggestions. The second is the content area, this is what the stack searches through to find matches with the entered text.

Getting Started:

1. Drag and drop the search bar stack and the search content stack on your page, be sure not to place the search bar inside of the content area. You can place each stack anywhere on your page, they don’t need to be next to eachother.

2. Next, place the content that you want to be searchable, inside of the content area. cleanSearch treats nested elements and stacks as one single item. So if you put Stack A inside of Stack B, it will treat Stack A as a part of Stack B. If you want Stack A and Stack B to be individual items, place them each within the content area, but not within another stack or with one inside of the other.

Here’s a visual representation:
cleanTut-01a

3. Select the search bar stack, in the customization options, go to ‘CleanSearch – Icon Styles’ and make sure that the box at the top titled ‘icon on’ is checked (it should be checked by default). Once this box is checked, you will see an area at the top of the stack in preview mode under ‘Icon:’ where it is possible to drag and drop stacks. You can either use images, text, or other stacks to display an icon next to the search bar. In the preview page for this stack, I am using a font awesome icon:
<i class=”icon-search”></i>
which looks like this –
if you want to use font awesome, your theme must support it. Azgard, the theme I used for my preview page, comes with font awesome built in. For more about font-awesome go here.

4. Now you can start customizing and designing this stack to fit the theme of your page! it’s a simple set-up, but it can accomplish some pretty incredible results.


Definition of Terms:

CleanSearch – General Controls

display text:

The text that you type in here will be displayed
inside the search bar until you start typing. If
you don’t want it to display anything, insert a
space. Rapidweaver wont let you leave the field
empty.

max-width:

The width of the search bar is set to 100%, but you can set the maximum width in pixels. So if the page scales smaller, the search bar will resize to fit, but it wont go larger than the amount you set.

height:

Sets the height of the search bar in pixels.


CleanSearch – Advanced Controls

limit characters/max characters:

Sets the total number of characters aloud to be entered into the search bar. This can be turned off by unchecking the ‘limit characters’ check box.

ignore capitals:

If checked, the search will treat upper-case, and lower-case letters the same. So ‘cLeaN SEArcH’ is the same as ‘cleanSeArCh’. However, if this is unchecked, it will pay attention to the case of each letter. So if you type ‘cleanSearch’ it will not recognize ‘CLEANsearch’ as a valid match.

center text:

this will center the text within the search bar section of this stack.

search options:

Rearrange will move the most relevant matches to the top, and the least relevant to the bottom, as you type. Hide/Show will hide all irrelevant elements, and show all matches.


CleanSearch – Auto Complete

auto-complete:

Checking this will allow you to create a list of words to suggest as the user types. The drop down list will only suggest the words/phrases that match what the user types.

suggestions:

Enter all possible words and/or phrases that you would like to suggest to users who search your page. Add these as a comma separated list. Here are some examples:

1. products, about us, blog, blog-posts, magic, pizza
2. products,about us,blog,blog-posts,magic,pizza
3. products , about us , blog , blog-posts , magic , pizza

It will automatically eliminate extra spaces next to commas, but it wont get rid of spaces in between words.


CleanSearch – Font Styles

font-size:

This will control the font within the search bar.

font-color:

This controls the color of the text that users type.

display-color:

This controls the color of the text that is displayed before the user types in the search bar.


CleanSearch – Icon Styles

icon on:

This gives you the ability to add an icon to the left or right of the search bar. You can either use an image, text, or other stacks as the icon.

icon-position:

Choose to display the icon either on the left or right side of the search bar.

icon-width:

Choose how wide you want the icon area to be. Be sure that whatever text, images, or stacks you use for the icon either fit within the icon area, or are responsive. Choosing an icon width of 50px, with an image that is 100px wide will result in the image being cut off.


CleanSearch – Search Bar Styles

background color:

Change the background color of the search bar(text input area) with Rapidweaver’s native color picker.

border color:

Change the border color of the search bar(text input area) with Rapidweaver’s native color picker.

border width:

Change the border width in pixels, or leave at 0 for no border.

rounded corners:

round the corners of the search bar in pixels, or leave at 0 for sharp 90degree corners.


CleanSearch – Auto Complete Styles

Note: If you have auto-complete turned off, these styles will not do anything.

drop down styles:

If checked, the below styles will take effect. If left unchecked, no styles will be applied to the drop down menu, and the theme’s defaults will take over.


These styles are for the auto-complete drop down menu.

background:

Change the background color of the drop down menu(containing the suggestion words/phrases) with Rapidweaver’s native color picker.

border:

Change the border color of the drop down menu(containing the suggestion words/phrases) with Rapidweaver’s native color picker.

border width:

Change the border width in pixels, or leave at 0 for no border.


These styles are for the items within the auto-complete drop down menu.

item font:

Change the font color of the drop down menu items with Rapidweaver’s native color picker.

border:

Change the border color for each of the drop down menu items with Rapidweaver’s native color picker.

border width:

Change the border width in pixels, or leave at 0 for no border.

item font-size:

Control the font-size in pixels for each of the drop down menu items.


These styles are for the active(selected) items within the auto-complete drop down menu.

active font:

Change the font color of the active(selected) drop down menu item with Rapidweaver’s native color picker.

border:

Change the border color for the active(selected) drop down menu item with Rapidweaver’s native color picker.

border width:

Change the border width in pixels for the active(selected) item, or leave at 0 for no border.

item font-size:

Control the font-size in pixels for the active(selected) drop down menu item.