-
Tutorials
- 0: Environment Setup
- 1: Basic Configuration, Options, and Markup
- 2: Interact With the Search Interface and Component Instances
- 3: Understanding the Event System
- 4: Modify the Query
- 5: Result Templates
- 6: Usage Analytics
- 7: Interact With Component States
- 8: Configure Your Own Search Endpoint
- 9: Advanced Integration With Custom TypeScript Component (Configuration)
- 10: Advanced Integration With Custom TypeScript Component (Implementation)
JavaScript Search Framework Tutorial 2: Interact With the Search Interface and Component Instances
The Coveo JavaScript Search Framework offers several high-level functions and methods that you can use to interact with the interface and each of its individual components.
In this tutorial, you’ll learn how to execute a query, get a component instance, and execute a method on this instance.
You’ll also have the opportunity to put what you have learned in practice by doing exercises.
If you have significantly modified the ./bin/index.html
page in the previous tutorial, you can undo these changes by rebuilding the project. To do so, run the following command line from the root of the tutorial project folder:
npm run build
Execute a Query
Consider the following markup in an HTML page:
<body id="search" class='CoveoSearchInterface'>
[ ... ]
</body>
Using the Coveo JavaScript Search Framework, you could trigger a new query using pure JavaScript, as such:
var rootElement = document.querySelector('#search');
Coveo.executeQuery(rootElement);
You can also use the Dom helper class (see Class Dom), this way:
var rootElement = Coveo.$$(document).find('#search');
Coveo.executeQuery(rootElement);
Finally, you can use jQuery to interact with the framework:
$('#search').coveo('executeQuery');
Why three different ways to trigger a query?
The Coveo JavaScript Search Framework was initially designed primarily as a jQuery extension. Consequently, lots of examples and code samples in the reference documentation use the jQuery extension. Over time, however, the jQuery extension became more of an “add-on” to the framework. It’s no longer considered “core.”
Internally, the framework doesn’t use jQuery at all. It instead uses the Dom
helper class.
The jQuery extension is still available for developers who might feel more comfortable with it.
The three ways to trigger a query are perfectly equivalent and execute the exact same underlying code. It’s up to the developer to choose which one they prefer.
Get a Component Instance
Consider the following markup in an HTML page:
<body id="search" class='CoveoSearchInterface'>
[ ... ]
<div class="CoveoFacet" data-title="Source" data-field="@source" data-tab="All"></div>
[ ... ]
</body>
You could get the Facet
component instance using pure JavaScript, as such:
var facetElement = document.querySelector('.CoveoFacet[data-title="Source"]');
var facetInstance = Coveo.get(facetElement);
You can also use the Dom helper class (see Class Dom), this way:
var facetElement = Coveo.$$(document).find('.CoveoFacet[data-title="Source"]');
var facetInstance = Coveo.get(facetElement);
Finally, you can use jQuery to interact with the framework:
var facetInstance = $('.CoveoFacet[data-title="Source"]').coveo('get');
The rest of this tutorial step will only show examples using the Dom helper class.
Execute a Method on a Component Instance
Consider the following markup in an HTML page:
<div id="search" class='CoveoSearchInterface'>
<div class="CoveoSearchbox" data-enable-omnibox="true"></div>
<div class="CoveoFacet" data-title="Source" data-field="@source" data-tab="All"></div>
</div>
You can select the YouTube - bbcnews
value from the Facet
instance like this:
var facetElement = Coveo.$$(document).find('.CoveoFacet[data-title="Source"]');
var facetInstance = Coveo.get(facetElement);
facetInstance.selectValue('YouTube - bbcnews');
Then, you could call the reset
method from the Facet
instance like this:
facetInstance.reset();
More Information on Available Functions and Methods
This section contains answers to some of the most frequently asked questions about available functions and methods in the Coveo JavaScript Search Framework.
- Q: How can I know what global functions, such as
executeQuery
, are available in the framework?-
A: In the reference documentation index, there’s a Functions section in which all function calls available under the
Coveo
namespace have been listed (see Coveo JavaScript Search Framework - Reference Documentation).You can use the
state
global function to get thestate
object, which will be discussed later in this tutorial (See JavaScript Search Framework Tutorial 7: Interact With Component States).
-
- Q : How can I know what methods are available for a specific component, such as the
selectValue
orreset
methods of theFacet
component?-
A : In the reference documentation, you can find all publicly exposed methods for any component by consulting the documentation of that component.
isElementIncludedInTab
andselect
are exposed methods of theTab
component.
-
Exercises
- All exercises in this section should be done by modifying the tutorial search page under
./bin/index.html
. The exercises shouldn’t be done by modifying the original search page under./pages/index.html
. - To actually see the results in your demo page, you must be running a webpack-dev-server (See JavaScript Search Framework Tutorial 0: Environment Setup).
-
In your search interface, add a new button that triggers a query when clicked. Save your work and reload your demo page at http://localhost:3000.
Solution
<head> <!-- ... --> <script> document.addEventListener('DOMContentLoaded', function () { Coveo.SearchEndpoint.configureSampleEndpointV2(); Coveo.init(document.body); // The following lines should be added. var buttonElement = document.querySelector('button'); buttonElement.addEventListener('click', function() { Coveo.executeQuery(document.body); }) }) </script> </head> <body id="search" class='CoveoSearchInterface' data-enable-history="true"> <!-- The following button should be added. --> <button style="height:40px;width:40px">Click</button> <!-- ... --> </body>
-
Select a new tab after initialization. Save your work and reload your demo page at http://localhost:3000.
Remember that you’re using Lazy loading (see Lazy Versus Eager Component Loading).
Solution
<head> <!-- ... --> <script> document.addEventListener('DOMContentLoaded', function () { Coveo.SearchEndpoint.configureSampleEndpoint(); Coveo.init(document.body); // The following lines should be added. Coveo.load("Tab").then(function(Tab) { var secondTabElement = Coveo.$$(document).find(".CoveoTab[data-id='ANewTab']") var secondTabInstance = Coveo.get(secondTabElement); secondTabInstance.select(); }); }) </script> </head> <body id="search" class='CoveoSearchInterface' data-enable-history="true"> <div class="coveo-tab-section"> <a class="CoveoTab" data-id="All" data-caption="All Content"></a> <!-- The following tab should be added. --> <a class="CoveoTab" data-id="ANewTab" data-caption="A New Tab"></a> </div> <!-- ... --> </body>
What’s Next?
You should now proceed to JavaScript Search Framework Tutorial 3: Understanding the Event System.