AngularJS ngxSouffleur (unobtrusive typeahead) directive
Featured Video Play Icon

AngularJS ngxSouffleur (unobtrusive typeahead) directive

I am currently developing a single page application using the awesome AngularJS framework. And because code sharing is still a trend, I will take my turn on it as well. The video above basically shows the complete functionality: Highly unobtrusive typeahead suggestions for input fields. A prompter (German: souffleur) in an opera house gives the singers the opening words of each phrase a few seconds early (wiki).

With every entered letter the directive looks if there exist suggestions in an array. If so, the first match is being displayed. When the user presses the tab key the suggestion is accepted and a custom event is fired.

The directive creates a new ngxSouffleur HTML tag which takes a couple of attributes: src (array containing possible suggestions), ng-model (will contain the input’s value), event (function to fire when the suggestion is accepted), child-class (class for the two child elements, if you are using bootstrap this might be ‚form-control‘) and finally input-id if you make use of html input labels somewhere.

The HTML for this is pretty basic. A relative positioned div containing two absolute positioned elements: The input the user types into and another div which contains the suggestion and is located right behind the input using absolute positioning.

<div>
  <div>{{souffleur}}</div>
  <input type="text" ng-model="model">
</div>

Below the directives complete JS code. JS and CSS are available on GitHub.