---
title: JS Library
slug: template-js/library
docTags: 
createdAt: 2022-06-03T20:22:59.000Z
---

## 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.

```javascript
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`

```javascript
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.

```javascript
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.

```javascript
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](https://jsfiddle.net/klevu/dhy8t6s0/29)****