Evan Callahan

Visualforce Typeahead Component

Here is something I hope will be helpful to you.

A few months back, I researched “typeahead” components - controls that let you search for data as you type - for use on Visualforce pages. When you want to provide a lookup to related data on a page, this can provide much better usability than the standard Salesforce lookup control.

typeahead-readme-image

The most popular open-source typeahead components appear to be jQueryUI’s autocomplete and typeahead.js from Twitter. I found several helpful examples of the jQueryUI approach, but I wanted to try to the latest version of Twitter typeahead.js instead – primarily because I found it was easier to use with Javascript remoting to query the data rather than the Salesforce REST API. (Using the REST API consumes API calls, which are limited, while remoting does not.)

After I got typeahead.js working on my own page for an internal project, I thought it would be interesting to create a reusable Visualforce component. Introducing visualforce-typeahead, an open-source project you can find and install on Github.

I designed the component with plenty of attributes so that you can customize its behavior, but as they all have default values it is extremely easy to get started with the component – just add it to your page and it works:

<h3>Account Name:</h3>
<c:Typeahead object=”Account” />

I also created a 4-minute video to introduce the component:

<iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/Cc87v39Z9tY?version=3&rel=1&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent" frameborder="0" data-ratio="0.6318181818181818" data-width="440" data-height="278" style="display: block; margin: 0px; width: 440px; height: 278px;"></iframe>

You can install the component and resources into your own Salesforce account (or sandbox) using this link.

Please give it a try and leave your feedback, or fork the project on Github. -ejc