Dans le dernier tutorial, on a vu comment intégrer la recherche dans son application Windows 8-style Metro:

Windows Metro – Clouder! (11) – Utiliser la recherche intégrée à Windows 8 dans son application

Maintenant on va voir comment faire pour non pas afficher les résultats mais afficher à l’utilisateur, des suggestions de recherche adaptées à ce qu’il vient de taper.

Un petit merci pour la route

Je n’invente pas ce que j’écris dans ces tutoriaux, ils sont souvent basé sur des recherches ou sur les documentations Microsoft. Là, c’est un très bon article de Thomas Lebrun qui m’a donné toutes les pistes:

[Windows 8] How to get a search suggestions list ?

Merci donc à lui pour avoir participé indirectement à l’écriture de cet article :)

Utilisation des API Windows

Si vous regardez à la fin du fichier results.js généré par Visual Studio, vous avez cette instruction:

appModel.Search.SearchPane.getForCurrentView().onquerysubmitted = function (args) { nav.navigate(searchPageURI, args); };

Cet écouteur d’évènement « onquerysubmitted » est appelé quand l’utilisateur valide une recherche. Soit en cliquant sur une suggestion, soit en appuyant sur Entrée.

On va ajouter un autre écouteur d’évènement qui se nomme « onsuggestionsrequested »:

appModel.Search.SearchPane.getForCurrentView().onsuggestionsrequested = function (eventObject) {

};

L’objet « eventObject » contient de nombreuses informations, notamment la propriété « queryText » qui contient le texte entré par l’utilisateur et une « deferral » qui va permettre de « faire attendre Windows » jusqu’à ce qu’on lui dise que l’on a récupéré les résultats, comme ils sont récupérés de manières asynchrones par XHR.

La technique pour suggérer des résultats est très simple, on va faire une recherche sur SoundCloud limitée à 5 résultats puis récupérer soit le titre, soit le nom d’utilisateur (SoundCloud cherche dans les deux). Ensuite, on va détecter les éléments qui semblent dupliqués. En effet, on aura beaucoup de résultats avec des casses différentes (minuscules / majuscules), il n’est pas utile d’afficher cela à l’utilisateur.

A noter que Windows 8 ne peut afficher plus de 5 suggestions et c’est lui qui s’occupe du highlight du terme recherché dans la suggestion.

Voici le code complet de la méthode qui récupère les suggestions:

appModel.Search.SearchPane.getForCurrentView().onsuggestionsrequested = function (eventObject) {
        var queryText = eventObject.queryText;
        var suggestions = eventObject.request.searchSuggestionCollection;
        var deferral = eventObject.request.getDeferral();

        // Call services to get search suggestions and add them to the search pane
        window.soundCloudService.getTracks({ q: queryText, limit: 5 }, function (suggestResults) {
            if (suggestResults) {
                // éviter les doublons
                var suggestionMemory = [];
                suggestResults.forEach(function (item) {
                    if (item && item.title && queryText && queryText != "") {
                        var suggestion = null;
                        if (item.title.toLowerCase().indexOf(queryText.toLowerCase()) != -1) {
                            suggestion = item.title;
                        } else if (item.user.username.toLowerCase().indexOf(queryText.toLowerCase()) != -1) {
                            suggestion = item.user.username;
                        }
                        if (suggestion && suggestion != "" && suggestionMemory.indexOf(suggestion.toLowerCase()) == -1) {
                            suggestions.appendQuerySuggestion(suggestion);
                            suggestionMemory.push(suggestion.toLowerCase());
                        }
                    }
                });
            }
            deferral.complete();
        });

    };

Et voilà le résultat, des suggestions directement dans Windows 8 Metro!:

Conclusion

Tutorial assez court car Windows vous mâche pas mal le travail.

Ainsi, vous n’avez pas à vous occuper de l’interface de recherche, tout se fait dans la recherche unifiée Windows 8. Comme on a déjà géré l’évènement « onquerysubmitted », au click sur la suggestion, notre application va afficher les résultats correspondants.