@coveops/sectioned-omnibox
v1.0.2
Published
Provides a sectioned omnibox for the Coveo platform.
Downloads
3
Maintainers
Keywords
Readme
OmniboxSuggestions
Disclaimer: This component was built by the community at large and is not an official Coveo JSUI Component. Use this component at your own risk.
Getting Started
- Install the component into your project.
npm i @coveops/sectioned-omnibox
- Use the Component or extend it
Typescript:
import { OmniboxSuggestions, IOmniboxSuggestionsOptions } from '@coveops/sectioned-omnibox';
Javascript
const OmniboxSuggestions = require('@coveops/sectioned-omnibox').OmniboxSuggestions;
- You can also expose the component alongside other components being built in your project.
export * from '@coveops/sectioned-omnibox'
- Or for quick testing, you can add the script from unpkg
<script src="https://unpkg.com/@coveops/sectioned-omnibox@latest/dist/index.min.js"></script>
Disclaimer: Unpkg should be used for testing but not for production.
- Include the component in your template as follows:
Place the component in your markup:
<div class="CoveoOmniboxSuggestions"
data-title="Suggested Queries"
data-icon-component="CoveoIconPrefixedElement"
data-header-icon="icon-related"
data-show-when-omnibox-is-empty="false">
<div class="coveo-omnibox-content">
<div class="CoveoOmniboxSection"
data-title="Suggested Results"
data-icon="icon-matched"
id="matched-content"
data-id="matched-content"
data-show-when-omnibox-is-empty="false"
data-allow-keyboard-selection="false">
<div class="CoveoOmniboxMatchedContents"
data-number-of-queries="5"
data-expression=''
data-fields-to-include='title,filetype,objecttype'
data-target="matched-content"
></div>
</div>
</div>
</div>
Extending
Extending the component can be done as follows:
import { OmniboxSuggestions, IOmniboxSuggestionsOptions } from "@coveops/sectioned-omnibox";
export interface IExtendedOmniboxSuggestionsOptions extends IOmniboxSuggestionsOptions {}
export class ExtendedOmniboxSuggestions extends OmniboxSuggestions {}
Contribute
- Clone the project
- Copy
.env.dist
to.env
and update the COVEO_ORG_ID and COVEO_TOKEN fields in the.env
file to use your Coveo credentials and SERVER_PORT to configure the port of the sandbox - it will use 8080 by default. - Build the code base:
npm run build
- Serve the sandbox for live development
npm run serve