The search input completion in Eclipse Orion.

In the latest version of  Orion when you type your search term in the search box, it pops up a list of proposals filtered from your recent searched terms.

HTML5 datalist tag was the UI we used at beginning but due to the lack of the support of this from Safari and IE 9, we ended up using our own input completion widget that is similar but much more flexible on both UI and data binding point of view.

Not limited to be consumed by Orion, the input completion we implemented is purely based on html and java script, which is easy to hook up to any html INPUT element. The data binding on the input element is fully customize-able and able to accept results from web services.

When Orion consumes the input completion, as it has plug-in mechanism, you do not even have to change the data binding code. I will write another post regarding how to extend it in Orion but here  I just want to demo how  the input completion works as a stand-alone widget.

Please refer to the source code here or try it directly here.

From there you will see that when your web page creates an input element, an instance of inputCompletion is hooked up. The only thing you need to provide is a function that will return a full set of proposals(in html5, it is called datalist) with categories(html5 datalist does not have this).