SearchBox.onsuggestionsrequested event

Article
01/26/2017

[SearchBox is no longer available for use as of Windows 10. Instead, use AutoSuggestBox. ]

Raised when the system requests search suggestions from this app.

Syntax

<div 
    data-win-control="WinJS.UI.SearchBox" 
    data-win-options="{onsuggestionsrequested : handler}">
</div>

function handler(eventInfo) { /* Your code */ }
 
// addEventListener syntax
searchBox.addEventListener("suggestionsrequested", handler);
searchBox.removeEventListener("suggestionsrequested", handler);

Event information

Synchronous	No
Bubbles	Yes
Cancelable	Yes

Event handler parameters

eventInfo
Type: CustomEvent**

An object that contains information about the event. The detail property of this object contains the following sub-properties:
- detail.language
  The IETF language tag (BCP47 standard) that identifies the language associated with the query.
- detail.linguisticDetails
  A JavaScript object containing details about the query.
- detail.queryText
  The query text entered into the SearchBox control.
- detail.searchSuggestionCollection
  The collection of suggested options for the search query. The maximum length of all of the textual fields in a suggestion (such as text, detail text, and image alt text) is 512 characters.

Remarks

Note If your data source is asynchronous, you must wrap updates to the search suggestion collection in a Promise.

Examples

This example, from Quickstart: Adding search to an app, handles the onsuggestionsrequested event:

    function suggestionsRequestedHandler(args) {

        var query = args.detail.queryText.toLocaleLowerCase();

        // Retrieve the system-supplied suggestions.
        var suggestionCollection = args.detail.searchSuggestionCollection;

        if (query.length > 0 && window.Data) {

            args.detail.setPromise(WinJS.Promise.then(null, 
                function () {
                    Data.items.forEach(
                        function (element, index, array) {
                            if (element.title.substr(0, query.length).toLocaleLowerCase() === query) {
                                suggestionCollection.appendQuerySuggestion(element.title);
                            }

                        });

                    args.detail.linguisticDetails.queryTextAlternatives.forEach(
                        function (element, index, array) {
                            if (element.substr(0, query.length).toLocaleLowerCase() === query) {
                                suggestionCollection.appendQuerySuggestion(element);
                            }

                        });

                })
             );
        }
    }

Requirements

Minimum WinJS version	WinJS 3.0
Namespace	WinJS.UI

Share via