J'utilise le WinJS.UI.AutoSuggestBox du premier exemple sur ce lien: http://try.buildwinjs.com/#searchbox:simplelist1WinJS AutoSuggestBox ne rend pas correctement
Je copiais exactement le même code pour vous assurer que je ne fais aucune erreur de ma part , mais il ne rend toujours pas correctement. Je n'ai aucune idée de ce que le problème pourrait être. PS: le Data.animeList est un espace de noms défini sur default.js, il fonctionne correctement et je l'ai utilisé sur d'autres pages. C'est un tableau de chaînes, tout comme celui sur l'exemple mentionné ci-dessus. L'utilisation du tableau fourni dans l'exemple a abouti à la même chose.
Voici l'image montrant ce que le problème est (bien, ce n'est pas rendu, donc vous ne serez pas en mesure de voir quoi que ce soit): http://i.imgur.com/e0VYWB5.png
Et voici le code:
// For an introduction to the Page Control template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232511
(function() {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
WinJS.UI.processAll().then(function() {
// Renders the anime list view.
//var animeListView = document.getElementById("animeList");
//animeListView.winControl.header = Renderer._animeListHeaderTemplate;
//animeListView.winControl.itemDataSource = Data.animeListData.dataSource;
//animeListView.winControl.itemTemplate = Renderer._animeListTemplate;
//animeListView.winControl.layout = new WinJS.UI.GridLayout();
});
},
unload: function() {
// TODO: Respond to navigations away from this page.
},
updateLayout: function (element) {
/// <param name="element" domElement="true" />
// TODO: Respond to changes in layout.
},
});
var suggestionList = Data.animeList;
function suggestionsRequestedHandler(eventObject) {
var queryText = eventObject.detail.queryText,
query = queryText.toLowerCase(),
suggestionCollection = eventObject.detail.searchSuggestionCollection;
if (queryText.length > 0) {
for (var i = 0, len = suggestionList.length; i < len; i++) {
if (suggestionList[i].substr(0, query.length).toLowerCase() === query) {
suggestionCollection.appendQuerySuggestion(suggestionList[i]);
}
}
}
};
function querySubmittedHandler(eventObject) {
var queryText = eventObject.detail.queryText;
WinJS.log && WinJS.log(queryText, "sample", "status");
};
WinJS.Namespace.define("Sample", {
suggestionsRequestedHandler: WinJS.UI.eventHandler(suggestionsRequestedHandler),
querySubmittedHandler: WinJS.UI.eventHandler(querySubmittedHandler)
});
})();<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>home</title>
<link href="home.css" rel="stylesheet" />
<script src="home.js"></script>
</head>
<body>
<!-- Home page. -->
<div class="fragment">
<!-- Header of the home page. -->
<header aria-label="Header content" role="banner">
<!-- Back button for navigation between pages. -->
<button data-win-control="WinJS.UI.BackButton"></button>
<!-- Page title. -->
<h1 class="titlearea win-type-ellipsis">Anime Manager</h1>
<!-- Navbar. -->
<div class="navbar">
<button type="button">Profile</button>
<button type="button">Settings</button>
<!-- The AutoSuggestBox -->
<div style="background: red; display: inline-block; margin: 15px 0;" data-win-control="WinJS.UI.AutoSuggestBox" data-win-options="{
placeholderText: 'Type a show',
onsuggestionsrequested: Sample.suggestionsRequestedHandler,
onquerysubmitted: Sample.querySubmittedHandler
}"></div>
<!--<input type="search" placeholder="Search a show..." />-->
</div>
</header>
<!-- Body of the home page. -->
<section class="page-section" aria-label="Main content" role="main">
<div id="testes"></div>
<!-- Anime list view. -->
<!--<div id="animeList" data-win-control="WinJS.UI.ListView" data-win-options="{header: select('.header')}"></div>-->
</section>
</div>
</body>
</html>