API Reference

Namespace: cq-lookup

WebComponents. cq-lookup

Symbol lookup component <cq-lookup>.

A CIQ.ChartEngine.Driver.Lookup must be connected to this web component. The lookup driver searches financial exchanges for symbols that match the text entered in the component's input field.

The symbol lookup can be toggled using the Ctrl+Alt+S keystroke combination (see the symbolLookup action in hotkeyConfig.hotkeys in js/defaultConfiguration.js).

A default lookup driver is specified in the chart configuration object (see the Chart Configuration tutorial).

You can provide a different driver in the following ways:

Note: If the lookup component is unable to access a lookup driver, the component's input field is active, but the component does not produce results.

Keyboard control

When selected with tab key navigation and activated with Return/Enter, this component has the following internal controls:

  • Up/Down arrow — Move selection between search input, filters, and search results
  • Left/Right arrow — Switch between search result filters


Name Description Valid Values
cq-keystroke-claim Enables processing of keyboard input. Boolean attribute
cq-keystroke-default Enables the component to respond to keystrokes when the lookup input field does not have focus.

Warning: This feature may conflict with keyboard shortcuts set in other components.

Boolean attribute
cq-uppercase Forces text to uppercase. Boolean attribute
cq-exchanges Specifies a list of financial exchanges searched by the lookup driver. Overrides the exchanges parameter of CIQ.ChartEngine.Driver.Lookup. Comma-delimited list of exchange names; for example, "futures,govt,muni,corp"


  • To hide the lookup results window, modify the CSS as follows:
.stxMenuActive cq-lookup-results { opacity: 0 }
  • To preload default results (rather than an empty result pane) on initial load , set an onChartReady handler in the chart configuration object (see the Chart Configuration tutorial); for example:
config.onChartReady = (stx) => {
    const defaultResults = [
            "display": ["KW", "Kennedy - Wilson Holdings Inc", "NYSE"],
            "data": {
                "symbol": "KW",
                "name": "Kennedy - Wilson Holdings Inc",
                "exchDisp ": "NYSE"
            "display": ["RWR", "SPDR Series Trust - SPDR DJ Wilshire REIT ETF", "NYSEArca"],
            "data": {
                "symbol": "RWR",
                "name": "SPDR Series Trust - SPDR DJ Wilshire REIT ETF",
                "exchDisp": "NYSEArca"

    const UISymbolLookup = document.querySelector(".ciq-search cq-lookup");
  • The placeholder is programmatically set based on the width of the chart. On larger screens "Enter Symbol" is used, but on smaller screens only "Symbol" is used. As such, it is not sufficient to set a placeholder value on the HTML, as it will be overwritten by the Web Component logic. The following script will update the placeholder according to breakpoint values set in placeholderMapping. It should be placed inside the onWebComponentsReady callback provided in the defaultConfiguration object to ensure it is executed once all Web Components have been properly initialized. The approach here is to add a second breakpoint channel listener for the lookup component that overwrites the value set by default in the library.
function setLookupPlaceholders(placeholderMapping = {
    "break-lg": "Change symbol",
    "break-md": "+ symbol",
    "break-sm": ""
 }) {
  .forEach(el => {
        const { channels = {} } = el.context.config;
           channels.breakpoint || "channel.breakpoint",
           (breakPoint) => {
                    const symbolValue = placeholderMapping[breakpoint] || "Change symbol";

                    const symbolInput = el.querySelector("input");
                    symbolInput.setAttribute("placeholder", symbolValue);
  • 4.0.0 Added optional cq-uppercase attribute.
  • 7.4.0 Added optional cq-exchanges attribute.
  • 8.3.0 Enabled internal keyboard navigation and selection.


<cq-lookup cq-keystroke-claim cq-uppercase cq-keystroke-default>
    <cq-lookup-input cq-no-close>
        <input type="text" spellcheck="false" autocomplete="off"
               autocorrect="off" autocapitalize="none" name="symbol"
        <cq-lookup-filters cq-no-close>
            <cq-filter class="true">ALL</cq-filter>



With the decoupling of the uiHelper to the Lookup.Driver you must be sure to include both an argument for maxResults and the closure to handle the results. maxResults must either be a number or a string to result in default value of 100.

  • 3.0.0


Displays an array of results returned by the CIQ.ChartEngine.Driver.Lookup.

Each element in the array should be in the following format (see CIQ.ChartEngine.Driver.Lookup#acceptText):

    display: ["symbol ID", "symbol description", "exchange"],
    data: {
        symbol: "symbol ID",
        name: "symbol description",
        exchDis: "exchange"

The lookup component by default displays three columns as represented by the array. The data object can be a format required by your quote feed, or it can be a simple string if you just need to support a stock symbol.

Name Type Description
arr array

The array of results.

selectItem(data, fn)

Accepts a new symbol or symbol object.

Name Type Description
data object

Contains a symbol or symbol object in a form accepted by CIQ.ChartEngine#loadChart.

fn function

Function to execute when the callback set by setCallback finishes.

  • 8.2.0 Removed the params parameter. Added the fn parameter.


Sets a callback function to be called when the user selects a symbol.

Name Type Description
cb function

The callback function; for example, an implementation of CIQ.UI.Context#changeSymbol.


Connects a CIQ.ChartEngine.Driver.Lookup to the web component.

The lookup driver searches financial exchanges for symbols that match the text entered in the component's input field.

Name Type Description
driver CIQ.ChartEngine.Driver.Lookup

The lookup driver to connect to the web component.