```
Executing the following script instantiates a `Tab` component with `Don't Panic` as a `caption`, `42` as an `id` and `@author=="Douglas Adams"` as an `expression` on the element that matches the `#myElement` CSS selector:
```javascript
const myElement = document.getElementById("myElement");
const options = {
caption: "Don't Panic",
id: "42",
expression: "@author==\"Douglas Adams\""
};
new Coveo.Tab(myElement, options);
```
You can achieve the same result using the jQuery `coveo` extension:
```javascript
$("#myElement").coveo("Tab", options);
```
> **Note**
>
> When initializing a component manually in lazy mode, you must use the [`load`](https://coveo.github.io/search-ui/globals.html#load) top-level function to ensure that the component code is available (see [Interacting with lazy components](https://docs.coveo.com/en/295#interacting-with-lazy-components)):
>
> ```javascript
// ...
Coveo.load("Tab").then((Tab) => {
new Coveo.Tab(myElement, options);
});
```
## Configuring components
Most components have a number of options that can be passed during initialization.
### Using attributes
You can specify options by using custom attributes on an HTML element that's bound to a component.
The name of the attribute is the option name, in lower case, prefixed by `data-` and with each word separated by a dash.
**Example**
On the HTML element of a [`Searchbox`](https://coveo.github.io/search-ui/components/searchbox.html) component, you can set the [`enableSearchAsYouType`](https://coveo.github.io/search-ui/components/querybox.html#options.enablesearchasyoutype) option to true using the `data-enable-search-as-you-type` attribute:
```html
```
### Passing component options in the `init` Call
You can configure a component by passing its options to the `init` top-level function call.
You can also configure a specific component in the `init` call by referring to its HTML `id` attribute.
If you specify a component option in both the markup and the `init` call, the markup option overrides the one in the `init` call.
**Example**
Consider the following markup:
```html
```
With the following script, the `init` function sets the `enableSearchAsYouType` option to `true` on the `Searchbox` it finds under the root element.
It also sets the `enableInfiniteScroll` and `autoSelectFieldsToInclude` options to `true` on both of the `ResultList` components it finds.
Therefore, in the following example, the resulting `enableInfiniteScroll` option is `false` for the `ResultList` whose `layout` is `list`, whereas it's `true` for the `ResultList` whose `layout` is `card`.
```javascript
document.addEventListener("DOMContentLoaded", () => {
Coveo.SearchEndpoint.configureSampleEndpointV2();
const mainSearchInterface = document.getElementById("search");
Coveo.init(mainSearchInterface, {
Searchbox: {
enableSearchAsYouType: true
},
ResultList: {
enableInfiniteScroll: true,
autoSelectFieldsToInclude: true
}
});
});
```
If you specify options for both a component type and a specific `id` that refers to a component of that type, the JavaScript Search Framework merges these options, prioritizing the options you specify by `id`.
In the following code sample, the resulting `waitAnimation` of the `ResultList` whose `id` is `myCardResultList` is `spinner`, its `enableInfiniteScroll` and `autoSelectFieldsToInclude` are both `true`, and its `infiniteScrollPageSize` is `15`.
```javascript
document.addEventListener("DOMContentLoaded", function() {
Coveo.SearchEndpoint.configureSampleEndpointV2();
const root = document.getElementById("search");
Coveo.init(root, {
ResultList: {
enableInfiniteScroll: true,
waitAnimation: "fade",
autoSelectFieldsToInclude: true
},
myCardResultList: {
waitAnimation: "spinner",
infiniteScrollPageSize: 15
}
});
});
```
### Passing component options before the `init` call
When you're working on a hosted search page or [Coveo for Salesforce](https://docs.coveo.com/en/1404/) search page, you can't directly access the `init` call of your search interface.
However, you can pass component configuration options before the `init` call by using the [`options`](https://coveo.github.io/search-ui/globals.html#options) top-level function.
**Example**
Consider the following markup:
```html
```
The following script would make the `fileTypeFilter` facet display [normalized facet value captions](https://docs.coveo.com/en/368/):
```javascript
const root = document.getElementById("search");
const fileTypeFilterValueCaptions = {
// ...
"html": "Web pages",
"txt": "Text files",
"zip": "ZIP files"
};
Coveo.options(root, {
fileTypeFilter: {
valueCaption: fileTypeFilterValueCaptions
}
});
```
### Initializing components external to your CoveoSearchInterface
Sometimes, it can be useful to have a component that's outside of your main search interface.
For example, you may want to include a search box in your page header and bind it to a search interface in another section of your page.
Suppose you have the following two components:
```html
```
You could initialize your external search box as follows:
```javascript
document.addEventListener("DOMContentLoaded", () => {
Coveo.SearchEndpoint.configureSampleEndpointV2();
const standaloneSearchbox = document.getElementById("myStandaloneSearchbox");
const mainSearchInterface = document.getElementById("myMainSearchInterface");
Coveo.init(mainSearchInterface, {
externalComponents: [
standaloneSearchbox
]
});
});
```
Your search box would then be linked to your search interface.
Note that the `externalComponents` option accepts an array of jQuery objects.
Each component in this array will be initialized after components that are direct children of the search interface.
### Using child elements
You can configure some components by using a child HTML element with a special CSS class.
This is typically used for result templates.
**Example**
You can specify options for the `ResultList` component using a template annotated with the `result-template` class.
```html
```
### Changing options after initialization
The JavaScript Search Framework doesn't currently support changing options after component initialization.
## Calling methods on components
Some components expose methods that you can use to perform certain actions.
You can use the [`get`](https://coveo.github.io/search-ui/globals.html#get) top-level function to retrieve the component instance whose method you want to execute.
**Example**
The `ResultList` component has a `displayMoreResults` method that causes it to fetch and display additional results after the ones that are already displayed.
You can call this method as follows:
```javascript
const resultListElement = document.getElementById('#myResultList');
let resultListInstance = Coveo.get(resultListElement);
resultListInstance.displayMoreResults(10);
```
You can also achieve similar results using the jQuery extension:
```javascript
$('#myResultList').coveo('displayMoreResults', 10);
```
> **Notes**
>
> * The jQuery selector in the expression must match an element that's bound to a component that exposes the requested method.
> The first argument to the `coveo` jQuery extension is the name of the method to invoke, followed by its arguments.
>
> The call to the jQuery extension returns the method return value, if one exists.
> If not, the selector itself is returned to allow method chaining, as is typical with jQuery.
>
> * If several elements match the selector, the method will be invoked on all of them, and the return value will be that of the first invocation.
## What's next?
Review the following articles to explore more component capabilities:
- [Interact with the framework and its components](https://docs.coveo.com/en/369/)
- [Lazy versus eager component loading](https://docs.coveo.com/en/295/)
- [jQuery extension](https://docs.coveo.com/en/364/)