Namespace: cq-lookup

.stxMenuActive cq-lookup-results { opacity: 0 }

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);
}

function setLookupPlaceholders(placeholderMapping = {
    "break-lg": "Change symbol",
    "break-md": "+ symbol",
    "break-sm": ""
 }) {
  Array.from(uiContext.topNode.querySelectorAll('cq-lookup'))
  .forEach(el => {
        const { channels = {} } = el.context.config;
        el.channelSubscribe(
           channels.breakpoint || "channel.breakpoint",
           (breakPoint) => {
                    const symbolValue = placeholderMapping[breakpoint] || "Change symbol";

                    const symbolInput = el.querySelector("input");
                    symbolInput.setAttribute("placeholder", symbolValue);
         );
       });
    });
}
setLookupPlaceholders();

<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="">
        <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.