Textareas on Steroids - autocomplete, dropdowns, triggers...
1 person uses it
Author: 2827818?v=3 aurbano


Textareas on Steroids - just adding an AngularJS directive


  • Word highlighting (syntax, keywords... ) with support for multiple sets
  • Autocomplete
  • Dropdown suggestions (mention users after typing @, hashtag support, keywords... )
  • Minimal configuration required, but highly customizable if necessary

Getting started

To setup smartArea on an element simply add the attribute:


All of these examples use the same HTML markup, only the configuration changes.

User mentions

Test in Plunkr

Syntax highlighter and autocompleter for a SQL editing textarea

autocompleteOnSpace sets the trigger to run even when the user hasn't started typing, so that it already suggests commands. It defaults to false, which could be useful for other words, in the example the table names.


The configuration options are mostly optional and have sensible defaults:


You can specify here sets of words that will be available on autocomplete. autocomplete expects an array of objects, each being a different autocomplete rule:

  • words is required, it must be an array of either strings or RegExp objects. If they are strings they will be available on the autocomplete dropdown, if they are regular expressions they will only be used to apply CSS classes.
  • cssClass is an optional string with classes that will be set on the elements, you can think of it as syntax highlighting.
  • autocompleteOnSpace defaults to false, it determines whether the words on the list will be suggested before the user begins typing a word.


This element is a lot more powerful than the autocomplete, it's essentially the same concept, but with custom trigger, list function, and selection functions.

  • trigger: This can be either a string or a RegExp. In either case, smarArea will call the list function when the user places the cursor after it.
  • list: This function gets called as soon as the trigger is found. If the trigger is a string, the only parameter will be (callback). If the trigger is a RexExp you'll get (match, callback), where match is the result of the regular expression. In both cases you must execute the callback with one parameter:
    • list() should not return anything, use the callback instead (This brings async support).
    • The data to be used by the list will be passed to callback (See the examples)
    • The format of that data is: [{display: string, data: Object}, ...]
    • data is an Object where you can pass information to the onSelect event.
  • onSelect: This function gets called when an element is selected from the dropdown. I receives the selected object that you returned on the list() function (So inside onSelect you can access for you custom properties).
  • filter: Defaults to false, if set to true it will add a filtering field to the dropdown.
  • mode: Either replace or append. Use replace when you want to complete something the user is typing (i.e. user mentions). Use append when you suggest something that goes after the trigger, without removing the trigger.


The directive doesn't force any styles on the dropdown or textareas so that you can fully integrate it with your design. I would recommend using the stylesheet from the repo, and then modifiying to suit your needs.

Dropdown element

This is the only visible element created by the directive, smart-area doesn't include any styling, it only has some layouting CSS. The dropdown is generated with the following markup:

As you can see, it uses bootstrap CSS classes, so if you site uses it you'll be all set. Otherwise, create CSS styles for:

  • input.form-control
  • ul.dropdown-menu (and children)
  • ul.dropdown-menu

By Alejandro U. Alvarez - AGPLv3 License

comments powered by Disqus
This page was last updated over 3 years ago.