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".


american airlines
aol   amazon


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!

Comments (25)
  1. Boris says:‎

  2. Grzechooo says:

    This is some impressive HTML/JS magic.

  3. Andrew says:

    Did you write all the HTML/CSS/JavaScript by hand?

  4. scidonem says:

    LOL that's awesome Raymond!

  5. Nick says:

    Raymond, the keyboard in your Bing app does not seem to work on non-touch monitors.

  6. Paul says:

    That was not very Win32-ish of you, Raymond ;)

  7. Bryan W says:

    I tried to think how I would implement such a thing and came up with something way more convoluted. It's funny how the simplest solution is often the best one.

    I am interested in whether you wrote the HTML/JS/CSS by hand or used a tool. The all-caps authoring and use of <b> tags is not contemporary style.

  8. John says:

    I have zero knowledge or experience in Windows 8 Style Store Modern Metro Apps so forgive me if this is a dumb question, but how does the Bing app know what color and style to draw the widgets in?

  9. Joshua says:

    I have a koan for you. The thing that you see is not the thing that is.

  10. John Doe says:

    @John, most probably the same way every OS X app knows the font is Lucida Grande 13 pt and the foreground is black, Of Course™.

    Or was it 11 pt?  10 pt?  Was it bold?  Ah, seriously, the content is Obviously™ Helvetica 12 pt.

    User preferences?  What's that, a 1990'ism?

  11. jader3rd says:

    The Windows Phone keyboard shows suggestions. Given that it's supposed to be one Windows one would hope that the desktop version of Windows would be at least as powerful as the phone version.

  12. Anon says:


    Don't tempt him, or tomorrow's post will be "Functional keyboard built entirely in HTML, CSS, and Javascript."

  13. 12BitSlab says:

    I nominate Raymond for Deity status.

  14. JDT says:

    The "On-Screen keyboard" that comes with Windows (since Vista?) has suggestions; and the Windows phone keyboard has great suggestions built-in; I'm surprised Windows is lagging behind here.

    [The Windows keyboard also makes suggestions. But this UI is for Bing-powered suggestions based on what people are searching for right now. -Raymond]
  15. alegr1 says:

    This must be one of those dozen people who used Bing app.

  16. Pseudo-Anonymous says:


    The On-Screen Keyboard has had suggestions since Windows 7, when it was redesigned.

    Personally, I only used the Bing app once and found no really appealing reason to use it instead of a web browser. I used the Windows 8.1 Smart Search about as many times.

  17. Gabe says:

    Is it wrong that I was slightly disappointed to see that the caret didn't blink? If only there were some HTML element that could be utilized to make it blink…

  18. Zan Lynx' says:

    Hmm. So if someone replaced the built-in Windows 8 touch keyboard with something like Swype in a green color, it wouldn't match up anymore. That's always the problem with faking things.

  19. Andreas Rejbrand says:

    @Gabe: Using CSS3 animations, it is trivial to make something blink.

  20. ANon says:

    @Zan Lynx'

    You assume that it isn't reading the colour of the keyboard.

  21. MrDiSante says:



    Joke = = =

        Your head

    There was a non-standard HTML element that did this that was very popular in the 90s.…/Marquee_tag

  22. Gabe says:

    MrDiSante: Close. This is the one I meant:…/Blink_tag

    The funny thing being that out of all the millions of uses for that HTML element, blinking the caret is probably the only legitimate one.

  23. Henke37 says:

    This one must have been a pain to localize, there are so many different keyboard layouts. And as if that isn't enough, windows supports switching layout on the fly.

  24. Andreas Rejbrand says:

    @MrDiSante: I know of <blink>, I just wanted to point out the CSS3 thing in case someone wasn't aware of it.

  25. Danny says:

    1 – This is about W8. Drag'n'drop to "not interesting" category;

    2 – You guys made 80% of the comments about Ray's style of implementing images using HTML/Javascript/CSS; he already told you the tool he is using to do that in like years ago. You all must be new to this blog.

Comments are closed.