The integration of WizSoft Search in your web site it quite simple. There is no XML uploading. Just login, and select the database and the field to be searched. (See video).

In the HTML page, include the clientLib.js and update some properties. No need for code. Customization is done by Mustache templates. Additional customization can be implemented through the API.

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:

<input type="text" 
  data-wzsrch="2501940583ae55d92eb949a16d656404">

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:

<script id="recordsTmpl" type="x-tmpl-mustache">
    
      <div style="padding:5px;border:1px solid black">
        <div style="color:red">{{record.word}}</div>
        <div>{{record.definition}}</div>
      </div>				
</script>

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:

<input id="zz" type="text" 
    data-wzsrch="2501940583ae55d92eb949a16d656404"
    data-wz-rec-template="recordsTmpl"
    data-wz-rec-target="myResults"
data-wz-rec-roller="roller"
    >
    
    <div id="myResults"></div>
<div id="roller"></div>
  
  <script id="recordsTmpl" type="x-tmpl-mustache">	
      <div style="padding:5px;border:1px solid black">
        <div style="color:red">{{record.word}}</div>
        <div>{{record.definition}}</div>
      </div>				
  </script>

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:

<script id="sampleTmpl" type="x-tmpl-mustache">
    <div data-wzsrchvalue="{{fullWord}}" style="border:1px solid black;padding:5px"> <b>{{fullWord}}</b> ({{concurency}}) </div>
    
  </script>

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”.