WinJS AutoSuggestBox 保留选定的建议

Question

我正在使用 WinJS.UI.AutoSuggestBox。每次我从 suggestionCollection 中选择项目时，该项目都会出现在输入中，但当我单击其他地方（输入失去焦点）时，该项目从输入中消失，我的搜索文本又回到输入中。

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

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

我也希望能有一些很好的 WinJS 示例文档，我是新手，而且我总是无法快速找到我需要的东西，而无需查看一打帖子。

Answer 1

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

顺便说一句，如果你有充分的理由破解它，方法如下：

1.You需要保存在某处选择的建议：

var lastQuery; 

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

2.You需要在input控件中订阅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.Inside onblurhandler 手动更新输入的文本值：

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

WinJS AutoSuggestBox 保留选定的建议

WinJS AutoSuggestBox preserve selected suggestion

javascript

winjs

autosuggest