javascript - WinJS AutoSuggestBox 保留选定的建议

Question

我正在使用 WinJS.UI.AutoSuggestBox。每次当我从 suggestCollection 中选择项目时，该项目就会出现在输入中，但是当我单击其他位置(输入失去焦点)时，该项目就会从输入中消失，而我的搜索文本会重新出现在输入中。

与示例相同:http://winjs.azurewebsites.net/#searchbox .

如何使我的选择文本在失去焦点后保留在 AutoSuggestBox 中？

我也希望有一些很好的文档，其中包含 WinJS 的示例，我是新来者，我总是无法快速找到我需要的内容，而无需查看十几篇帖子。

Answer 1

这里的要点是，您想要的不是 AutoSuggestBox 的设计体验。它的设计方式使得用户可以随着时间的推移继续完善他/她的输入，这就是为什么当输入控件失去焦点时它会被保留。

顺便说一句，如果您确实有充分的理由破解它，那么方法如下:

1.您需要将选定的建议保存在某处:

var lastQuery; 

function querySubmittedHandler(eventObject) {
    var queryText = eventObject.detail.queryText; 
    lastQuery = queryText;
    ...
}

2.需要订阅输入控件中的onblur事件。这是一个棘手的问题，因为该控件是动态创建的:

var box;
WinJS.UI.processAll().then(function(){
    box = document.getElementById("autoSuggestBox"); 
    // this is how to get internal input
    box.winControl.element.querySelector("input").onblur = onblurinput; 
    // alternative
    // document.querySelector("#autoSuggestBox input").onblur = onblurinput;
});

3.onblurhandler内部手动更新input的文本值:

function onblurinput() {
    box.winControl.queryText = lastQuery;  
}