Integrating into the web app:

(1) Create an archive using the options in WizSoft web site or through the API.

Include the library “wzsrch.wizcloud.co.il/clientLib.js” in your page (you will need JQuery as well).

(2) Add the archive’s public key to your input control at the attribute “data-wzsrch” of your html input control:

This step will establish a suggest box for the control, including error correction.

(3)  In order to display the search results you should instruct the WizSoft Search library how to format them. Formatting is done by Mustache templates.

In the current example, the dataset is the English dictionary, and the fields are: word, definition and id. So the template might look like this:

Add this template to the page, and set the attribute data-wz-rec-template=”recordsTmpl”  to the edit control.

You should also have to determine where the results will be displayed. For example, you may create a div where the results will be rendered and set the attribute data-wz-rec-target to its ID.

So now the page looks like this:

That all that is required in order to get a basic functioning search.

(4) Adding pagination: Add a div that will serve as a container for the pagination element, and define this div’s ID in the property data-wz-rec-roller. The system will create a fully functioning pagination element.

(5) Customizing  the suggest box: Add a template and set the attribute data-wztemplate to its ID. In the Mustache template you can set two parameters are the {{fullWord}} which is the suggested term, and the {{concurency}} which is the number of records congaing the term. For example:

In the example the property data-wzsrchvalue denotes the string that will be updated in the search control.

(6) Retrieving records instead of a suggest box: Set the attribute data-rec-suggest to “yes” and you are done. Records will be formatted using the template defined in data-wz-rec-template

(7) Highlighting the search term in the results: Set the attribute data-wz-mark-field to the name of the database field you like to highlight. In the current example: data-wz-mark-field=”definition”.