How can I get the Windows 8 touch keyboard to display autocomplete suggestions like the Bing app?

Raymond Chen

A customer observed that if you use the Windows 8 Bing app with the touch keyboard, the top of the touch keyboard includes autocomplete suggestions for quick access. They wanted to know how to enable this in their own application. In the illustration below, it’s the two boxes immediately above the keyboard with the words “aol” and “amazon”. The ones that slide into view.

if (document.querySelectorAll) { (function() { document.getElementById(“id20140417CanSlide”).style.display = “”; var bing = document.getElementById(“id20140417Bing”); fade = bing.querySelectorAll(“.fadeIn”); pop = bing.querySelectorAll(“.popIn”); slide = bing.querySelectorAll(“.slideUp”); function progress(p) { var i; for (i = 0; i < fade.length; i++) { fade[i].style.opacity = p; } for (i = 0; i < pop.length; i++) { pop[i].style.opacity = p ? 1 : 0; } for (i = 0; i < slide.length; i++) { var height = parseInt(slide[i].style.height); slide[i].style.top = ((1 – p) * height) + "px"; } } progress(0); var requestAnimationFrame = window.requestAnimationFrame || function(c) { c(); } var t = 0; function schedule(delay) { setTimeout(function() { requestAnimationFrame(nextFrame); }, delay); } function nextFrame() { var delay = 25; switch (++t) { case 1: progress(0); delay = 1000; break; case 11: progress(1); delay = 3000; t = 0; break; default: progress((t – 2) / 10); break; } schedule(delay); } schedule(0); })(); } The answer is that it’s all done with mirrors. The thing with the completion suggestions is not actually a part of the keyboard. The Bing app is simply drawing a black box with buttons at the very bottom edge of their window, so that it exactly abuts the touch keyboard. Touch events on those buttons go straight to the Bing app, and Bing programmatically inserts the appropriate word into the text box.

In other words: It’s a fake!

Raymond Chen

Follow