The JavaScript library can be downloaded from here.
NOTE: Please do not just hot link to that URL - there is no guarantee that it won't change.
Repustate provides a very simple way to embed a Deep Search search bar anywhere on your website or web app to allow you to let your customers (or internal users) the ability to search any of your Deep Search indexes.
At a bare minimum, you'll have to create an element (likely a div) to contain the Deep Search search bar widget as well as import the Deep Search Javascript file. Below is a minimal example of what's needed:
<html>
<head>
<script type="text/javascript" src="https://path/to/deepsearch.min.js">
</script>
</head>
<body>
<div id="ds-container"></div>
</body>
</html>
Now let's create the widget itself. This code should be placed right before the closing body tag. Remember to put your API key and your Deep Search index in place of the variable names below.
const el = document.getElementById("ds-container");
const options = {
"pagesize":30
};
const searchbar = new DeepSearch(el, YOUR_API_KEY, YOUR_INDEX, options);
Below are the configurable options for the Deep Semantic Search search bar:
| Name | Default | Description |
|---|---|---|
| host | https://api.repustate.com | The URL to send API requests to. Unless you are hosting Deep Semantic Search on-premise, this option can be omitted |
| pagesize | 30 | The maximum number of results to return for a given search. If your search has more results than `pagesize` you'll have to use pagination to iterate over them. |
| searchMinChars | 4 | The minimum number of characters that need to be typed for autocomplete suggestions appear. Anything less than 4 is unadvisable. |
| placeholder | Enter your Deep Semantic Search query (or type ?help for more info) | The text that initially appears in an empty search bar widget |
Whenever a search is run, Deep Search will trigger an event of type 'rssearch:search' that your code can listen for. This event will have the search results stored as part of the event's detail. It's up to you what you do with those results. Here is some sample code to illustrate this process:
const el = document.getElementById("ds-container");
const options = {
"pagesize":30
};
const searchbar = new DeepSearch(el, YOUR_API_KEY, YOUR_INDEX, options);
el.addEventListener("rssearch:search", function(e) {
/*
e.detail.error will be a string if there is an error message to show, otherwise null.
e.detail.total is the total number of results found
e.detail.matches is a list of the matching documents
For each matching document, m, you can access the following attributes:
- m.id is the document ID assigned by Repustate
- m.lang is a two-letter code representing the language of the document
- m.title is the original title of the document
- m.text is the original text of the document
*/
});
The response to a search is part of the event's `detail` attribute. Below is an explanation of this object:
| Name | Description |
|---|---|
| e.detail.error | If an error occured during search, this value will be an error message. Otherwise it will be null. |
| e.detail.total | The total number of results that the search returned |
| e.detail.matches |
A list of matching documents. Each document, m, has the following attributes:
|
When the number of search results exceeds the pagesize you've set for your Deep Search search bar, Repustate will automatically paginate results based on the date the document was inserted into your index. To paginate through results, simply call doNext or doPrev as illustrated below. Each invocation of doNext and doPrev will trigger a search event and you can render the results as you would have in the previous section.
const el = document.getElementById("ds-container");
const options = {
"pagesize":30
};
const searchbar = new DeepSearch(el, YOUR_API_KEY, YOUR_INDEX, options);
el.addEventListener("rssearch:search", function(e) {
// code to render search results goes here.
});
// Add event listeners to your previous and next buttons to aid in pagination.
const nextBtn = document.getElementById("ds-next");
nextBtn.addEventListener("click", function(e) {
// Calling doNext() will invoke a search using cursor-based pagination. A
// new rssearch:search event will be triggered that your listener above will
// receive.
searchbar.doNext();
});
const prevBtn = document.getElementById("ds-prev");
prevBtn.addEventListener("click", function(e) {
// Calling doPrev() will invoke a search using cursor-based pagination. A
// new rssearch:search event will be triggered that your listener above will
// receive.
searchbar.doPrev();
});