How to Add Site Search to Your Website

How to Add Site Search to Your Website

90 Second Website Builder has basic built-in search engine functionality, so visitors can search for specific words within your website. This allows you to create a type of search engine that is specific to your website only and produces a set of results your user will be familiar with.
For example…
Fortunately, the search feature does not have any special server requirements because it uses JavaScript, so it’s very easy to insert this component onto your page(s).

Search Index
Before you add the Site Search object to your page, make sure you have enabled Generate Search Index in Menu->Tools->Search Index – otherwise the search index will not be created and the search will not work.
In this example above,the option Include all text in search index is enabledThis will use all text from the page instead of just unique words. Although this will increase the size of the search index, the search results will look better and it makes it possible to search for phrases.

Site Search
When you drag the Site Search object onto the page, it will automatically add a button next to the input field. This is a standard button which can be positioned and styled separately. The Site Search input field has the same styling options as a standard Editbox.
The button is linked to the search input field via an onclick event. This event will trigger the search script.

Search Results
The most important part of the Site Search is the results. There are many options available to control the result output.
Besides styling options, like font, colors and padding, there are also options to specify where the results will be displayed.
In the example above, we chose Show results in another object under the Results option.To make this work, we have to add another object to the page. In this case we are using a Layer (Layer1). Of course you can change the background, border and other properties of the layer. Note that if the layer has any objects in it, they will be replaced by the search results.To make sure the results will be not displayed outside the layer, you can use one of these options:
1. Set the overflow property of the layer to scroll. This will add a scrollbar to the layer.
2. Set Results per page to a value larger than 0 to enable pagination. Pagination will look like this:

If you want to display the results in a column of a layout grid then you can also use the format LayoutGrid1 .col-1 for the results….Where LayoutGrid1 is the ID of the layout grid and .col-1, the column number.

Testing Site Search
To test the Site Search in preview you will need to preview the entire website, otherwise the search index will not be created.

1 thought on “How to Add Site Search to Your Website

  1. Hello Greg. I am from Croatia, Europe. I am grateful for your work. I learned a lot from you. I want you to be persistent in your business. Best wishes. Robert

Leave a Comment