API Reference
Namespaces
Classes
Events
Global
Externals

Namespace: cq-lookup

WebComponents. cq-lookup

Symbol lookup (Symbol Search) component <cq-lookup>.

Note: A CIQ.ChartEngine.Driver.Lookup must be provided. If none is provided, the default is used which displays no results.

Use [CIQ.UI.Context.setLookupDriver](CIQ.UI.Context.html#setLookupDriver) to link the driver to this web component.

Set <cq-lookup cq-uppercase> to force free-form text to be converted to uppercase.

Set <cq-lookup cq-exchanges=_comma-delimited-exchange-list_> to specify an override list of financial instrument exchanges for use by the lookup driver.

To turn off the result window, modify the CSS to .stxMenuActive cq-lookup cq-menu { opacity: 0 }.

To preload default results (rather than an empty result pane) on initial load , set an onChartReady handler in your chart configuration object (see the Chart Configuration tutorial for more information); 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.

Example

<cq-lookup cq-keystroke-claim 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)

Processes an array of results returned by the CIQ.ChartEngine.Driver.Lookup and displays them.

Each element in the array will be of the following format: { display:["symbol-id","Symbol Description","exchange"], data:{ symbol:"symbol-id", name:"Symbol Description", exchDis:"exchange" } }

The lookup widget by default displays three columns as represented by the array. The data object can be an format required by your QuoteFeed 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 function to be set as a callback; for example, an implementation of CIQ.UI.Context#changeSymbol.


setDriver(driver)

Sets a CIQ.ChartEngine.Driver.Lookup. If none is set, the context lookup driver is used (see CIQ.UI.Chart#initLookup). If a driver is not available, the input box is active but does not present a drop-down list.

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

The lookup driver to be set.