API Reference
Namespaces
Classes
Events
Global
Externals

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

Attributes

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"

Customization

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");
    UISymbolLookup.results(defaultResults);
}
Since:
  • 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.

Example

<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"
               placeholder="Enter Symbol">
        <cq-lookup-icon></cq-lookup-icon>
    </cq-lookup-input>
    <cq-lookup-results>
        <cq-lookup-filters cq-no-close>
            <cq-filter class="true">ALL</cq-filter>
            <cq-filter>STOCKS</cq-filter>
            <cq-filter>FX</cq-filter>
            <cq-filter>INDEXES</cq-filter>
            <cq-filter>FUNDS</cq-filter>
            <cq-filter>FUTURES</cq-filter>
        </cq-lookup-filters>
        <cq-scroll></cq-scroll>
    </cq-lookup-results>
</cq-lookup>

Methods


acceptText()

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.

Since:
  • 3.0.0


results(arr)

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.

Parameters:
Name Type Description
arr array

The array of results.


selectItem(data, fn)

Accepts a new symbol or symbol object.

Parameters:
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.

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


setCallback(cb)

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

Parameters:
Name Type Description
cb function

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


setDriver(driver)

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.

Parameters:
Name Type Description
driver CIQ.ChartEngine.Driver.Lookup

The lookup driver to connect to the web component.