Quickstart : Smart Search

there are three primary aspects required for any implementation core reference files settings/configuration page elements / markup the required reference files and corresponding markup may vary depending on the page context note the klevu configurations should be set globally see structure docid\ pumt e7jdseaf0pa2fm8f section for more detail on these components quick search the following code is the minimum required to get a quick search, or auto suggestions overlay, to appear this code sample contains js library core reference klevu js quick search theme layout reference quick search js configuration javascript options variable searchbox html target \<input> these elements are generally placed on a global template for use throughout the entire website copy (or adapt) this to a webpage and as soon as you click on the search box you should see some results appearing search results landing page the snippet above will direct the search to the relative url /search results as indicated using value assigned to options url landing the following search results landing page code sample will build on the previous by including 2 additional elements srlp theme layout reference search results page js search result html target/placeholder \<div> the following code is for the /search results webpage that now contains all the required elements note the index credentials used in this guide are specific for the klevu demo store catalog you are welcome to use the demo catalog for experiments and learning please adapt to your specific catalog as soon as possible to benefit from any specific modifications you will need for the success of your implementation using your own data there are some small modifications you will need to make to the klevu configuration within the options javascript variable in our examples in order for use with your klevu index and/or your specific integration element configuration options description landing page path url landing the url path to send customers to access the full search results search box selector search searchboxselector the class or id or handle used to locate the input search box(es) search query paramter url queryparam the name of the search \<input> to be used as the query parameter in the srlp url search url url search your klevu cloud search url + endpoint path search api key search apikey your public klevu js api key analytics api key analytics apikey your klevu analytics api key you can find your specific api key and endpoint information from shop info within your klevu merchant center see configuration docid\ el9qchgznersiaeg e lu for more details