Moved config options into single input

# Angular 2 Mentions

# Angular Mentions

Simple Angular 2 mentions inspired by [Ment.io](https://github.com/jeff-collins/ment.io).

Simple Angular mentions inspired by [Ment.io](https://github.com/jeff-collins/ment.io).

[Click here for a Demo](http://dmacfarlane.github.io/angular2-mentions/)

    items: string[] = ["Noah", "Liam", "Mason", "Jacob", ...

#### Options

#### Configuration Options

The following optional configuration items can be used.

| Option        | Default  | Description |

| ---           | ---      | ---         |

| triggerChar   | @        | The character that will trigger the menu behavior. |

| maxItems      |          | Limit the number of items shown in the pop-up menu. The default is no limit. |

| mentionSelect |          | An optional function to format the selected item before inserting the text. |

| labelKey      | label    | The field to be used as the item label (when the items are objects). |

| disableSearch | false    | Disable internal filtering (only useful if async search is used). |

For Example: 

    <input type="text" [mention]="items" [mentionConfig]="{triggerChar:'#',maxItems:10,labelKey:'name',valueKey:'value'}">

#### Output Events

- `[triggerChar]="@"` to specify the character that should trigger the menu behavior. The default value is '@'.

- `[maxItems]="10"` to limit the number of items shown in the pop-up menu. The default is no limit.

- `[mentionSelect]="formatter"` to specify a optional function to format the selected item before inserting the text.

- `[labelKey]="'label'"` to specify the field to be used as the item label (when the items are objects).

- `[disableSearch]="true"` to disable internal filtering (only useful if async search is used).

- `(searchTerm)=""` event emitted whenever the search term changes. Can be used to trigger async search.

#### TODO:

- Improve npm package structure

<h1>Angular 2 Mentions</h1>

<h1>Angular Mentions</h1>

<p>Simple Angular2 mentions inspired by <a href="http://jeff-collins.github.io/ment.io/#/">Ment.io</a>.</p>

<p>Simple Angular mentions inspired by <a href="http://jeff-collins.github.io/ment.io/#/">Ment.io</a>.</p>

<p style="color:grey">Supports auto-complete for mentions in text input fields, text areas,

and content editable fields. Try entering some @names below.</p>

<input [mention]="items" class="form-control" type="text">

<!--<h3>Minimal Async</h3>

<input [mention]="httpItems | async" [labelKey]="'label'" class="form-control" type="text" (searchTerm)='search($event)'>-->

<input [mention]="httpItems | async" [labelKey]="'label'" (searchTerm)='search($event)' class="form-control" type="text">-->

<!-- <h3>Options</h3>

<input [mention]="objectItems" class="form-control" type="text"

       [mentionConfig]="{triggerChar:'#',maxItems:10,labelKey:'name',valueKey:'value',mentionSelect:format}"> -->

<h3>Textarea</h3>

<textarea [mention]="items" class="form-control" cols="60" rows="4"></textarea>

})

export class MentionDirective {

  @Input() triggerChar: string = "@";

  @Input() set mention(items:any[]){

    this.items = items;

  }

  @Input() mentionSelect: (selection: string) => (string) = (selection: string) => selection;

  @Input() set mentionConfig(config:any) {

    this.triggerChar = config.triggerChar || this.triggerChar;

    this.labelKey = config.labelKey || this.labelKey;

    this.disableSearch = config.disableSearch || this.disableSearch;

    this.maxItems = config.maxItems || this.maxItems;

    this.mentionSelect = config.mentionSelect || this.mentionSelect;

  }

  // event emitted whenever the search term changes

  @Output() searchTerm = new EventEmitter();

  // the character that will trigger the menu behavior

  private triggerChar: string = "@";

  // option to specify the field in the objects to be used as the item label

  @Input() labelKey:string = 'label';

  private labelKey:string = 'label';

  // option to diable internal filtering. can be used to show the full list returned 

  // from an async operation (or allows a custom filter function to be used - in future)

  @Input() disableSearch:boolean = false;

  private disableSearch:boolean = false;

  // option to limit the number of items shown in the pop-up menu

  @Input() maxItems:number = -1;

  private maxItems:number = -1;

  // event emitted whenever the search term changes

  @Output() searchTerm = new EventEmitter();

  // optional function to format the selected item before inserting the text

  private mentionSelect: (selection: string) => (string) = (selection: string) => selection;

  searchString: string;

  startPos: number;

          return object;

        });

      }

      // remove items without an objectKey (label)

      // remove items without an labelKey or valueKey

      this.items = this.items.filter(e => e[this.labelKey]);

      this.items.sort((a,b)=>a[this.labelKey].localeCompare(b[this.labelKey]));

      this.updateSearchList();