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:
- Assign the driver to the
lookupDriver
property of the chart configuration object - Connect the driver to this component using setDriver
- Add the driver to the UI context with CIQ.UI.Context#setLookupDriver
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);
}
- 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": ""
}) {
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();
- 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.
- 4.0.0 Added optional
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="">
<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 thefn
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.