Building a Search Interface
Step 1: Include the HTML
<input data-stork="foo" /><div data-stork="foo-output"></div>
Stork requires an input element and an output element to attach to. Both those elements need to be tagged with a registration name, which is
foo above (though yours can be whatever you'd like). You'll use the registration name later.
Note:The input element must conform to the selector
The output element must conform to the selector
[data-stork="foo-output"]. The registration name must start with a letter.
Step 3: Register your index
<script> block where you call the
stork.register() function to set Stork up on your web page:
The first argument is an identifier that matches the downloaded index with the DOM elements that will display the search interface. The second argument is the URL where you've uploaded the index file that's been generated by the Stork command line tool. There is a third, optional argument you can pass to the
register() function takes: an options object. The options object exposes client-side configuration settings and a callback API; visit the JS API Reference to learn more.
There are also more functions on the Stork object that give you more granular control over the operations that
Step 4: Add a theme
Stork also offers pre-built themes, which it exposes through CSS files on the Stork CDN. To include the Basic theme, add the following within your page's
<link rel="stylesheet" href="https://files.stork-search.net/releases/v1.4.0/basic.css" />
You can see the entire selection of themes in the theme gallery.