Your first MLJS search page
This tutorial describes how to create an MLJS powered page from scratch.
Include the relevant files on the page
You first need to ensure that all CSS and JS files are included on your page. This can be achieved using statements in your page's HEAD like the below:-
You see here that I create an MLJS instance for server communication, and set the debug level so I can find any errors easily.
I also create an error widget. This will catch any widget errors and show them in a red box at the top of my page in a user friendly manner.
HTML for your widgets
You now need to ensure that somewhere in your page you have placeholders for your widgets (like 'errors' above). These are blank HTML tags (normally div tags) where widget's have complete control over the content within them.
This instructs MLJS to create two widgets, linked with a search context. The register function introspects the widgets to determine what events they generate and consume, and links them to the search context.
The options builder is an MLJS helper object to generate JSON search options configuration without complex code. Here we create a simple collection constraint (and facet) and specify that we want to use snippeting mode rather than return full documents.
setOptions instructs the searchcontext to use the default search options configured on the REST API instance, providing those options in case they do not already exist.
We also register the context with the error widget in case any problems are encountered performing the search.
doSimpleQuery instructs MLJS to perform a search immediately on page load with a blank query and starting at the first returned document. This effectively loads (by default) the first page of documents ordered by relevancy.
You now have a working MLJS Search page! Type in any phrase to find documents on your REST API endpoint that match.