Namespace: cq-lookup

WebComponents. cq-lookup

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

Note, a CIQ.ChartEngine.Driver.Lookup must be provided. If none is provided then the default will be 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 }.

See function startUI() in sample-template.js for complete sample implementation.

If you wish to preload default results on initial load, rather then an empty result pane, use the following code to be placed at the very end of the startUI() function.

var 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"
	    }
	  }
	];
	UIContext.UISymbolLookup.resultList=$(UIContext.UISymbolLookup).find("cq-scroll");
	UIContext.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="off" autocomplete="off" autocorrect="off" autocapitalize="off" 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, params)

Accepts a new symbol or symbolObject

Parameters:
Name Type Description
data Object

The symbol object (in a form accepted by CIQ.ChartEngine#loadChart)

params Object

Settings to control callback action


setCallback(cb)

Set a callback method for when the user selects a symbol

Parameters:
Name Type Description
cb function

Callback method


setDriver(driver)

Set a CIQ.ChartEngine.Driver.Lookup. If none is set then CIQ.UI.Context.lookupDriver will be used. If none available then the input box will still be active but not present a drop down.

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

The driver