April 17th, 2014

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

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.

|
a|

SUGGESTIONS
aol
amazon
att.net
autotrader
ask.com
american airlines
aol   amazon

q
w
e
r
t
y
u
i
o
p
a
s
d
f
g
h
j
k
l
Search
z
x
c
v
b
n
m
,
.
?
&123
Ctrl
 
<
>

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!

Topics
Code

Author

Raymond has been involved in the evolution of Windows for more than 30 years. In 2003, he began a Web site known as The Old New Thing which has grown in popularity far beyond his wildest imagination, a development which still gives him the heebie-jeebies. The Web site spawned a book, coincidentally also titled The Old New Thing (Addison Wesley 2007). He occasionally appears on the Windows Dev Docs Twitter account to tell stories which convey no useful information.

0 comments

Discussion are closed.