JavaScript Search Framework V0.9 (Legacy) JavaScript Search Framework V0.9 (Legacy) JavaScript Search Framework V0.9 (Legacy) Home The Coveo JavaScript Search Framework allows developers to easily deploy and customize a feature-rich client-side search interface in any web page, application, or standalone site to present results from a Coveo Cloud or on-premises index. The Coveo JavaScript Search Framework is also bundled with other Coveo products such as Coveo for Salesforce and Coveo for Sitecore. The Coveo JavaScript Framework is essentially a block of HTML and CSS defining a layout to organize a set of components. Components such as a search box, facets, tabs, or result sort options are used as building blocks to define your search interface (see Components). You can add, remove, move, and customize components within the page. The components are defined in HTML using a special syntax allowing you to modify a set of options. Components also expose JavaScript APIs allowing you to perform more advanced customization. The JavaScript Search Framework space contains working examples and detailed reference documentation for basic and advanced functionality. To get up and running with this framework start with Getting Started with the JavaScript Search Framework V0.9! If you have questions, you can use our public Q&A site available at answers.coveo.com. Example: The following screen capture shows an All.html out-of-the-box search page that comes connected to a demo index. Getting Started with the JavaScript Search Framework V0.9 The Coveo JavaScript Search Framework is a library written in pure JavaScript that allows building visually rich, full-featured search interfaces. These interfaces can work either in standalone or be integrated seamlessly to any website. To set up a search interface 1. Download the Coveo JavaScript Search Framework package (see Downloading). 2. Extract its contents to an arbitrary folder. 3. Among the extracted files, load All.html in your favorite web browser. 4. Validate that a fully working search interface is displayed in the browser's window. 2 JavaScript Search Framework V0.9 (Legacy) The contents of the package The Coveo JavaScript Search Framework package is composed of the following files: /css /fonts /image /js /lib /templates All.html MobileAll.html Email.html MobileEmail.html ... Most of the above subfolders contain resources used by the Search Framework, such as the css and js folders. The HTML files at the root of the package demonstrate samples of full-features search pages for various types of repositories (Email, SharePoint, Lithium, etc.). When creating custom search pages, it is possible to combine elements from multiple repositories into a single search page. In previous versions, the package contained a Search.html file with support for a few different repositories, each in a separated Tab. This has now changed so that each supported repository is now in a separate file. Behind the scenes: how it works While viewing the source of a sample search page (like All.html), you might realize that it's composed of all the HTML tags and syntax that you're already familiar with. Actually, a search interface is composed of nothing more than standard HTML tags decorated with special id and cl ass attributes. Those attributes tell the Search Framework library which components to instantiate, which features they support and how to render them in the page. Let's look at the head section of All.html: the two meta elements tell the browser to render the page using the UTF-8 charset as well as the latest version of the IE engine (assuming that IE is used). the first 3 script elements are used to include: the Search Framework's dependencies (see Dependencies). the Search Framework's main library (CoveoJsSearch.js). the generated search result templates (see Result Templates). the link element is used to include the stylesheet of a full-featured search interface. Indeed, you can write your own stylesheets to customize the appearance of a search interface. the last script element is used to: set up a REST API endpoint, which points to a sample Coveo index (see Endpoints). initialize a search interface by creating all the required components described under the element with the id equal to search (i. 3 JavaScript Search Framework V0.9 (Legacy) e. the body element). The head section of All.html <head> <title>Coveo Search</title> <!-- Render this document using the UTF-8 charset as well as the latest version of the IE engine --> <meta charset='utf-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- Include: -the Search Framework's dependencies -the Search Framework's main library -the generated search result templates -the stylesheet for a full-featured search interface --> <script src="js/CoveoJsSearch.Dependencies.js"></script> <script src="js/CoveoJsSearch.js"></script> <script src='templates/generated.js'></script> <link rel="stylesheet" href="css/CoveoFullSearch.css" /> <script type="text/javascript"> $(function () { /* Set up a REST API endpoint, which points to a sample Coveo index */ Coveo.Rest.SearchEndpoint.configureSampleEndpoint(); /* Initialize a search interface component, as well as all its child components */ $('#search').coveo('init'); }); </script> </head> Now, let's look at the body section of All.html: the body element has a class attribute equal to CoveoSearchInterface, which means that it instantiates a SearchInterface Component. the hyperlink elements with a class attribute equal to CoveoTab instantiates a Tab Component. the div elements instantiate the various components that are part of a search interface, depending on their class attribute: CoveoSettings: a button to customize the search interface settings. CoveoSearchBox: a SearchBox Component used to enter search keywords and perform a query. CoveoFacet: a Facet Component for filtering search results by a specific field. CoveoShareQuery: a ShareQuery component for sharing a link to a specific query. CoveoQuerySummary: a QuerySummary Component to provide the number of results for a query. CoveoQueryDuration: a QueryDuration Component to provide the execution time of a query. CoveoSort: a Sort component to allow sorting search results by a specific order (Date, Relevance). CoveoHiddenQuery: a HiddenQuery component to display the hidden part of a query. CoveoDidYouMean: a DidYouMean Component to display query suggestions. CoveoErrorReport: an ErrorReport component that displays any error that occurred while executing a query. CoveoResultList: a ResultList Component that displays the actual search results. CoveoPager: a Pager Component used to browse through search result pages. 4 JavaScript Search Framework V0.9 (Legacy) The body section of All.html (stripped-out version) <!-- Instantiate a SearchInterface component --> <body id="search" class="CoveoSearchInterface" data-enable-history="true" data-hide-until-first-query="true"> ... <!-- Display a Tab component for each content section (All, Files, Board, Message, Topic) --> <a class="CoveoTab" data-id="All" data-caption="All" data-icon="coveo-sprites-documentType-unknown_x16" /> ... <!-- Display a Settings component for customizing search interface settings --> <div class="CoveoSettings" data-include-in-menu=".CoveoShareQuery"></div> ... <!-- Display a SearchBox component for entering the search keywords. This also automatically displays a SearchButton component. --> <div class="CoveoSearchBox" data-activate-omnibox="true"></div> ... <!-- Display a Facet component for each field that we want to filter results with --> <div class="CoveoFacet" data-title="Type" data-field="@objecttype" data-allow-toggling-operator="true" data-show-icon="true" data-tab="All,Dev"></div> ... <!-- Display a SearchQuery component to provide a link necessary to share a specific query --> <div class="CoveoShareQuery"></div> <!-- Display a Breadcrumb component --> <div class="CoveoBreadcrumb"></div> ... <!-- Display the number of results --> <span class="CoveoQuerySummary"></span> <!-- Display the duration of the query --> <span class="CoveoQueryDuration"></span> <!-- Section where sorting options are displayed --> <span class="coveo-sort-section"> ... <!-- Display a HiddenQuery component to show the hidden part of the query --> <div class="CoveoHiddenQuery"></div> <!-- Display a DidYouMean component to provide query correction suggestions --> <div class="CoveoDidYouMean"></div> <!-- Display an ErrorReport component to log any error that occurs --> <div class="CoveoErrorReport" data-pop-up='true'></div> <!-- Display a ResultList component to show the actual search results --> <div class="CoveoResultList" data-wait-animation="fade"> <!-- Display search results using the ForumMessage custom template --> <script class="result-template" type="text/x-underscore-template"> <%= loadTemplate('ForumMessage', raw.sourcetype == "Lithium") %> </script> </div> <!-- Display a Pager component to browse through search result pages --> <div class="CoveoPager"></div> ... </body> 5 JavaScript Search Framework V0.9 (Legacy) To get a fully working search interface, you don't have anything more to do. Just add the components that you need to a standard HTML page and the Coveo JavaScript Search Framework will take care of binding everything to the search interface. It's as easy as that! What's next Learn more about the advanced customizations and possibilities offered by the Coveo JavaScript Search Framework by reading the Core Concepts page. Downloading Official Builds You can download the latest official version