ember-cli-mentionable

An ember-cli addon allowing facebook style @mentions and #hashtags on inputs and textareas.

demo

Features

written entirely in ember (no bower dependencies)
highly configurable and override-able
promise-based
no observers

Installation

ember install ember-cli-mentionable

Usage

for examples and documentation, view the demo

<!-- template -->
{{mentionable-input config=mentionableConfig value=foo}}

// controller
mentionableConfig: {
  values: ['Johnny', 'Syd', 'Steve', 'Paul']
}

Using object chosen from an array of hashes passed

<!-- template -->
{{mentionable-input config=asyncConfig searchValues=hashMapOfItems value=item didSelectValue='didSelectValue'}}

// controller
asyncConfig: {
  searchProperty: 'name',
  values: []
},

hashMapOfItems() {
  return Ember.RSVP.Promise((resolve) => {
    resolve([{
      id: 1,
      name: 'type 1'
    }, {
      id: 2,
      name: 'type 2'
    }])
  });
},

actions: {
  didSelectValue(selected) {
    console.log(selected); // contains the object that was chosen.
  }
}

To Do

highlight matching string in list
mentionable-contenteditable
maxResults to display in list
add the searchValues method to the mentionable config, so it cab be overriden globally or per config

Running Tests

npm test (Runs ember try:each to test your addon against multiple Ember versions)
ember test
ember test --server

For more information on using ember-cli, visit https://ember-cli.com/.

yakmada/ember-cli-mentionable