SearchButton which triggers a new query when the user clicks its element, or quite complex, such as the
Facet which allows drilling down within results using filters based on field values.
During initialization, components attach themselves to HTML elements having well-known CSS classes. Thus, to instantiate and use a component, you simply need to insert an HTML tag in the page with the appropriate CSS class.
You can create a customized search interface by assembling the components you need within an HTML page. No single component is mandatory; you need only include the components you need to get the functionalities you are looking for. All the visual parts of a search interface, such as the query box, the result list, the pager and so on, are in fact separate components that you can arrange and configure as you see fit.
Methods and Events
Dom helper class (See Step 2 - Interacting With the Search Interface and Component Instances).
.on() or any other method that can add listeners to DOM events. Most of the time, you will want to listen to events on the root HTML tag of your search interface. Events typically provide event data that contains information about the event and provides ways to interact with the framework (see Step 3 - Understanding the Event System).
- One particularly interesting event is
buildingQuery. This event sends an object called
queryBuilder, which allows components to add data to the outgoing query.
- Another interesting event is
querySuccess, which, as its name implies, sends an object called
results, which any component can access and read data from.
Refer to the Events section for more information.
The search interface has a state comprised of, among other things, the current query in the query box and the currently selected facets. When browser history management is enabled (as is typically the case in a full search page), this state is persistent in the browser query string.
When the user performs an action such as clicking a facet value, the state is automatically updated to reflect the change. Also, if the state is changed through code or directly through the query string, the appropriate components will update their visual representation to reflect the change.
The jQuery Extension provides an easy way to manipulate the state in external code. The same results can also be achieved using the
state top level function (see Step 8 - State and QueryStateModel - Interacting With Component State and With the URL).
For more information, refer to the State section.
Articles in this section: