Typeahead Search widget: How to change the order of results - Support and Troubleshooting

Typeahead Search widget: How to change the order of results Issue .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } }  Description The search results displayed in the suggestion list is determined by the relevancy scores of all the search source results combined.

If you want to change this standard behaviour it would be necessary to clone the widget and make changes to the code that implements the widget.

Procedure Looking at the client controller code the following is making an API request to execute the search:

c.getResults = function(query) { var payload = { "query": query, "portal": c.data.portalID, "source": c.data.searchSources, "include_facets": false, "isTypeahead": true }; if (c.options.limit || c.options.limit == 0) payload.count = c.options.limit;

return $http.post("/api/now/sp/search", payload).then(function(response) { var result = response.data.result; The result variable is populated with a list of the search results in order of the relevancy scores.

See the following screenshot that shows example results:

You will see that the items are in same order as displayed in the suggestion list and there is a type property that indicates if the item is catalog item ("sc") or a knowledge article ("kb").

The standard widget implementation does not allow changing the order of which the items are returned by the search API call.

To change the ordering of the items it would be necessary to implement custom code in the client controller to modify the ordering of the items in the result object.

Applicable Versions London, Madrid

Additional Information For example, a customer wanted all relevant knowledge articles to appear before catalog items.

In order to implement this the following approach could be considered:

1. create a clone of the standard widget Typeahead Widget 2. In the clone widget modify the client controller code after the following statement: var result = response.data.result; 3. add custom code to do something like this:

a) create a temporary object b) loop through each item in the result array (first to last) and evaluate if the item is returned by "kb" search source, if it is then add it to the temp object eg. so it appears at the top. c) loop through each item in the result array (first to last) again and evaluate if the item is returned by "sc" search source., if it is then add it to the temp object eg. so it appears after all the kb articles. d) assign the temp object back to the results object

Please note that this is just a top-level suggestion. It is left for the reader to perform full analysis and design of the code solution. This has not been tested or verified by customer support.

Release .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } }

Resolution .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } }