angular-ui/ui-mention

Name: ui-mention

Owner: AngularUI

Description: Facebook-like @mentions for text inputs built around composability

Created: 2015-07-26 04:48:07.0

Updated: 2018-05-17 14:16:26.0

Pushed: 2016-12-20 07:15:59.0

Homepage: http://angular-ui.github.io/ui-mention/example/

Size: 68

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

ui-mention

Facebook-like @mentions for text inputs built around composability

Installation Methods

npm

m install angular-ui-mention

bower

wer install angular-ui-mention

Usage

For now, you should create a child-directive to customize (API probably going to change)

ective('myMention', function($http){
turn {
require: 'uiMention',
link: function($scope, $element, $attrs, uiMention) {
  /**
   * Converts a choice object to a human-readable string
   *
   * @param  {mixed|object} choice The choice to be rendered
   * @return {string}              Human-readable string version of choice
   */
   uiMention.label = function(choice) {
     return choice.first_name + " " + choice.last_name;
   };

  /**
   * Retrieves choices
   *
   * @param  {regex.exec()} match    The trigger-text regex match object
   * @return {array[choice]|Promise} The list of possible choices
   */
  uiMention.findChoices = function(match, mentions) {
    return $http.get(...).then(...);
  };
}

You have to build the HTML yourself:

 class="ui-mention-container">

extarea ng-model="data" ui-mention my-mention></textarea>

iv class="ui-mention-highlight"></div>

l class="dropdown" ng-if="$mention.choices.length">
<li ng-repeat="choice in $mention.choices"
  ng-class="{active:$mention.activeChoice==choice}"
  ng-click="$mention.select(choice)">
  {{::choice.first_name}} {{::choice.last_name}}
</li>
ul>

v>

And the CSS:

mention-container {
sition: relative;
i-mention] {
min-height: 100px;
background: none;
position: relative;
z-index: 2;
box-sizing: content-box; // Prevent scrollbar for autogrow

i-mention-highlight {
  white-space: pre-wrap;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  color: rgba(0,0,0,0);
  z-index: 1;
  span {
    border-radius: 2px;
    background-color: lightblue;
    border: 1px solid blue;
    padding: 0 2px;
    margin: -1px -3px;
  }

ropdown {
position: absolute;
top: 100%;
left: 0;

Amazing Features!

All these features come at the amazingly low price of DO IT YOURSELF and $0.00. YMMV.

User your own patterns:

ion.delimiter = '/* delimiter */';

ion.searchPattern = new RegExp("/* pattern */");

ion.decodePattern = new RegExp("/* pattern */");

Find things!:

ion.findChoices = function(match) {
 Matches items from search query
turn [/* choices */].filter(function(choice) {
return ~this.label(choice).indexOf(match[1]);
;

Type too freakin' fast? Throttle that sucker:

ion.findChoices = _.throttle(function(match) {
turn [/* choices */];
00);

Minimum characters to trigger:

ion.findChoices = function(match) {
 (match[1].length > 2)
return [/* choices */];

Hate redundancy? De-dupe that shiznizzle:

ion.findChoices = function(match, mentions) {
turn [ /* choices */ ].filter(function(choice) {
return !mentions.some(function(mention) {
  return mention.id === choice.id;
});
;

Use the awesome power of the internet:

ion.findChoices = function(match) {
turn $http.get('/users', { params: { q: match[1] } })
.then(function(response) {
  return response.data;
});

Your servers are slow? Mama please.

ion.findChoices = function(match) {
ntion.loading = true;
turn $http.get(...)
.finally(function(response) {
  mention.loading = false;
});

Dropdown that list like it's hot:

ng-if="$mention.choices.length" class="dropdown">
i ng-repeat="choice in choice" ng-click="$mention.select(choice)">
{{::choice.name}}
li>
>

SPINNIES!

ng-if="$mention.choices.length" class="dropdown">
i ng-show="$mention.loading">Hacking the gibson...</li>
i ng-repeat=...>...</li>
>

Contribute

1. npm install
2. npm install -g gulp bower
3. bower install
4. gulp [watch]
5. Compiling the example code: gulp example [watch]