--- title: Interact with the framework and its components slug: '369' canonical_url: https://docs.coveo.com/en/369/ collection: javascript-search-framework source_format: adoc --- # Interact with the framework and its components There are three distinct but equivalent ways to interact with the Coveo JavaScript Search Framework and its components. > **Note** > > **About lazy loading** > > [jsui-new Coveo JavaScript Search Framework v2.2900.23] > > > As of its [July 2017 release (v2.2900.23)](https://docs.coveo.com/en/373#july-2017-release-v2290023), the Coveo JavaScript Search Framework allows you to use _lazy loading_ to asynchronously download only the minimal amount of code your search page requires, rather than using _eager loading_ to sequentially download the entire framework, whether your search page needs the totality of this code or not. > > When using lazy loading in your search page, wait for a component promise to resolve before interacting with it. > > [example] > .Example Interacting with a lazy `Tab` component would look something like this: ```javascript Coveo.load('Tab').then(function(Tab) { // Interact with the Tab component. }); ``` ##### For more information on how to interact with the Coveo JavaScript Search Framework using lazy loading, see [Lazy versus eager component loading - Interacting with lazy components](https://docs.coveo.com/en/295#interacting-with-lazy-components). For the sake of simplicity, this page uses _eager_ loading in its examples, which doesn't require you to wait for component promises to resolve. #### == Using "pure" JavaScript You can interact with the Coveo JavaScript Search Framework using standard JavaScript. ### Getting a component instance You can use standard JavaScript methods such as `document.querySelector()` to get the HTML element of a component you want to interact with. The `Coveo.get()` method then allows you to get a reference to the corresponding component instance. You can call methods from this reference. **Example** Consider the following markup: ```html [ ... ] [ ... ] ``` Running the following code sample will select the Facet component instance with the field option set to @author and collapse it (see [`Facet.collapse()`](https://coveo.github.io/search-ui/components/facet.html#collapse)). ```javascript var myFacetElement = document.querySelector('.CoveoFacet[data-field="@author"]'); var myFacetInstance = Coveo.get(myFacetElement); myFacetInstance.collapse(); ``` ### Calling a top-level function _Top-level functions_ are functions you can call directly from the Coveo namespace (for example, `Coveo.executeQuery()`, `Coveo.state()`, etc.). These functions usually require the root element of your search interface as an argument. In most scenarios, this root element of your search interface has the `search` id. **Example** Consider the following markup: ```html [ ... ] [ ... ] ``` Running the following code sample will execute a query (see [`Coveo.executeQuery()`](https://coveo.github.io/search-ui/globals.html#executequery)). ```javascript var mySearchInterfaceRootElement = document.querySelector('#search'); Coveo.executeQuery(mySearchInterfaceRootElement); ``` ### Binding an event handler You can use the standard JavaScript `EventTarget.addEventListener()` method to bind event handlers. Most of the time, the event target should be the root element of your search interface. > **Important** > > A native event handler receives the `event` argument in the detail property of the `CustomEvent` instead of a second argument, as is the case when binding event handlers using either Coveo.$$ or jQuery. **Example** The script part of the following code sample binds an event handler to the root element of the search interface on the buildingQuery event to add foobar to the current query expression. ```javascript [ ... ] [ ... ] [ ... ] ``` ## Using Dom helper class (`Coveo.$$`) You can use the `Coveo.$$` function, which wraps the `Dom` class to interact with the Coveo JavaScript Search Framework and its components. The `Dom` class implements a small subset of jQuery functionalities that the Coveo JavaScript Search Framework requires (`append`, `find`, `on`, etc.). > **Note** > > The `Dom` class was introduced to minimize the risk of having jQuery conflicts when integrating the Coveo JavaScript Search Framework in various systems. > > Internally, the Coveo JavaScript Search Framework doesn't use jQuery at all; > it always uses the `Dom` class. ### Getting a component instance You can use the `Dom.find()` method to get the HTML element of a component you want to interact with. The `Coveo.get()` method then allows you to get a reference to the corresponding component instance. You can call methods from this reference. **Example** Consider the following markup: ```html [ ... ]

[ ... ]

[ ... ]

[ ... ] ``` Running the following code sample selects the `Tab` component instance whose id option is All and selects it (see``Tab.select()``). ```javascript var myTabElement = Coveo.$$(document).find('.CoveoTab[data-id="All"]'); var myTabInstance = Coveo.get(myTabElement); myTabInstance.select(); ``` ### Calling a top-level function _Top-level functions_ are functions you can call directly from the Coveo namespace (for example, `Coveo.executeQuery()`, `Coveo.state()`, etc.). These functions usually require the root element of your search interface as an argument. In most scenarios, this root element of your search interface has the `search` id. To get this element with `Coveo.$$`, use the `Dom.find()` method. **Example** Consider the following markup: ```html [ ... ] [ ... ] ``` Running the following code sample sets the current sort criteria of the QueryStateModel to date ascending (see [Coveo.state()](https://coveo.github.io/search-ui/globals.html#state)). ```javascript var mySearchInterfaceRootElement = Coveo.$$(document).find('#search'); Coveo.state(mySearchInterfaceRootElement, 'sort', 'date ascending'); ``` ### Binding an event handler You can use the `Dom.on()` method to bind event handlers. Most of the time, the event target should be the root element of your search interface. **Example** The script part of the following code sample binds an event handler to the root element of the search interface on the `buildingQuery` event to add `foobar` to the current query expression. ```javascript [ ... ] [ ... ] [ ... ] ``` ## Using the jQuery extension You can use the jQuery extension to call any of the Coveo JavaScript Search Framework top-level functions and component methods (see [jQuery](https://jquery.com/)). If you're unfamiliar with jQuery, you're encouraged to use another method instead. > **Note** > > Initially, the Coveo JavaScript Search Framework was designed primarily as a jQuery extension. > Over time, however, the `Dom` class was introduced to eliminate the need for this dependency. > > Therefore, the jQuery extension is no longer considered "core" to the Coveo JavaScript Search Framework. > This implies that you have to manually add a reference to the jQuery library to use the jQuery extension. > > [example] > .Example You could include an online reference to the jQuery library. ```xml [ ... ] [ ... ] ``` ##### > **Important** > > Some Coveo implementations such as Coveo for Salesforce and Coveo for Sitecore currently include their own references the jQuery library. > Therefore, the jQuery extension should work out of the box with these products and you normally don't need to add a new reference to the jQuery library to use it (see [Coveo for Salesforce V2](https://docs.coveo.com/en/1243/) and [Coveo for Sitecore 4 Release Home](https://docs.coveo.com/en/557/)). #### === Getting a component instance You can call the `Coveo.get()` top-level function with the jQuery extension to get a component instance. **Example** Consider the following markup: ```html [ ... ]

[ ... ]

[ ... ] [ ... ] ``` Running the following code sample puts a reference to the Settings component instance in the `mySettingsComponentInstance` variable. ```javascript var mySettingsComponentInstance = $('.CoveoSettings').coveo('get'); ``` Using the jQuery extension, you can also call a method directly on a component instance. **Example** Consider the following markup: ```html [ ... ]