JS Library

overview build events are defined using build each event will execute from the time of creation for maxcount times with an interval of delay or until the event evaluates to true via the fire function this allows us to check that everything is ready before triggering the rest of our functionality, via event listeners or observers klevu coreevent build({ name "klevuexampleevent", fire function () { if ( klevu isundefined(klevu search extrasearchbox) || (klevu search extrasearchbox length == 0) ) { return false; } else { return true; } }, maxcount 500, delay 30 }); when the conditions of this event have been satisfied any listeners attached to this event will fire attach for example, the following event listener associates an html template with the search box, klevuautosuggesttarget note that is is attached to the event defined as klevuexampleevent klevu coreevent attach("klevuexampleevent", { fire function () { klevu each(klevu search extrasearchbox, function (key, box) { box getscope() template settemplate(klevu dom helpers gethtml("#klevutemplateautosuggestion"), "klevuautosuggesttarget", true); }); } }); chains another event listener will perform the more interesting parts, which is where we introduce the concept of chains in klevu javascript library to specify some data to retrieve during the klevu api request specify what to do with that data when the response comes back for example, the below is an addition to the api request build chain to include autosuggestions (with a count of 5) in the query response box getscope() chains request build add({ fire function (data, scope) { var parametermap = klevu getsetting(scope kscope settings, "settings search map", false); var suggestion = klevu extend(true, {}, parametermap suggestions); suggestion id = "autosuggestion"; suggestion query = data context term; suggestion typeofrequest = "auto suggestions"; suggestion limit = 5; data request current suggestions push(suggestion); data context dosearch = true; } }); the next example adds to the template render chain, to populate the page with our klevuautosuggesttarget template when the result contains autosuggestion data box getscope() chains template render add({ fire function (data, scope) { if (data context issuccess) { scope kscope template setdata(data template); var targetbox = "klevuautosuggesttarget"; var element = scope kscope template converttemplate(scope kscope template render(targetbox)); var target = klevu getsetting(scope kscope settings, "settings search searchboxtarget"); target innerhtml = ''; scope kscope element kdata = data template; scope kscope template inserttemplate(target, element); } } }); library example putting all of the above concepts together, we have a simple html search box which will produce auto suggestion terms, products, categories and cms via the klevu api when typing we recommend doing this with the network tab open so you can see the api requests and responses try it yourself by clicking here https //jsfiddle net/klevu/dhy8t6s0/29