Implemented issue #338 - Autocomplete Email-Address-Fields.

app/assets/javascripts/app/controllers/ticket_zoom/article_new.coffee

@@ -86,11 +86,35 @@ class App.TicketZoomArticleNew extends App.Controller
       @render()
     )
 
+    # set expand of text area only once
+    @bind('ui::ticket::shown', (data) =>
+      return if data.ticket_id.toString() isnt @ticket.id.toString()
+      console.log('SHOW, ui::ticket::shown', data.ticket_id)
+      @tokanice()
+    )
+
     # rerender, e. g. on language change
     @bind('ui:rerender', =>
       @render()
     )
 
+  tokanice: ->
+    source = "#{App.Config.get('api_path')}/users/search"
+    a = ->
+      $('.content.active .js-to, .js-cc, js-bcc').tokenfield(
+        createTokensOnBlur: true
+        autocomplete: {
+          source: source
+          minLength: 2
+        },
+      ).on('tokenfield:createtoken', (e) ->
+        if !e.attrs.value.match(/@/) || e.attrs.value.match(/\s/)
+          e.preventDefault()
+          return false
+        true
+      )
+    App.Delay.set(a, 500, undefined, 'tags')
+
   setPossibleArticleTypes: =>
     actionConfig = App.Config.get('TicketZoomArticleAction')
     keys = _.keys(actionConfig).sort()
@@ -147,15 +171,7 @@ class App.TicketZoomArticleNew extends App.Controller
       position:  'right'
     )
 
-    configure_attributes = [
+    @tokanice()
-      { name: 'customer_id', display: 'Recipients', tag: 'user_autocompletion', null: false, placeholder: 'Enter Person or Organization/Company', minLengt: 2, disableCreateObject: false },
-    ]
-
-    controller = new App.ControllerForm(
-      el: @$('.recipients')
-      model:
-        configure_attributes: configure_attributes
-    )
 
     @$('[data-name="body"]').ce({
       mode:      'richtext'
@@ -334,6 +350,7 @@ class App.TicketZoomArticleNew extends App.Controller
     @hideSelectableArticleType()
 
     $(window).off 'click.ticket-zoom-select-type'
+    @tokanice()
 
   hideSelectableArticleType: =>
     @el.find('.js-articleTypes').addClass('is-hidden')

app/assets/javascripts/app/lib/base/bootstrap-tokenfield.js

@@ -2,6 +2,10 @@
  * bootstrap-tokenfield
  * https://github.com/sliptree/bootstrap-tokenfield
  * Copyright 2013-2014 Sliptree and other contributors; Licensed MIT
+ *
+ * Edit: Felix
+ * - remove maxTokenWidth
+ *
  */
 
 (function (factory) {
@@ -250,25 +254,6 @@
       var $tokenLabel = $token.find('.token-label')
         , $closeButton = $token.find('.close')
 
-      // Determine maximum possible token label width
-      if (!this.maxTokenWidth) {
-        this.maxTokenWidth =
-          this.$wrapper.width() - $closeButton.outerWidth() -
-          parseInt($closeButton.css('margin-left'), 10) -
-          parseInt($closeButton.css('margin-right'), 10) -
-          parseInt($token.css('border-left-width'), 10) -
-          parseInt($token.css('border-right-width'), 10) -
-          parseInt($token.css('padding-left'), 10) -
-          parseInt($token.css('padding-right'), 10)
-          parseInt($tokenLabel.css('border-left-width'), 10) -
-          parseInt($tokenLabel.css('border-right-width'), 10) -
-          parseInt($tokenLabel.css('padding-left'), 10) -
-          parseInt($tokenLabel.css('padding-right'), 10)
-          parseInt($tokenLabel.css('margin-left'), 10) -
-          parseInt($tokenLabel.css('margin-right'), 10)
-      }
-
-      $tokenLabel.css('max-width', this.maxTokenWidth)
       if (this.options.html)
         $tokenLabel.html(attrs.label)
       else

app/assets/javascripts/app/views/ticket_zoom/article_new.jst.eco

@@ -41,19 +41,19 @@
         <div class="formGroup-label">
           <label for=""><%- @T('To') %></label>
         </div>
-        <div class="controls"><input type="text" name="to" value="<%= @article.to %>" class="form-control js-mail-inputs" required="required"></div>
+        <div class="controls"><input type="text" name="to" value="<%= @article.to %>" class="form-control js-mail-inputs js-to" required="required"></div>
       </div>
       <div class="input form-group">
         <div class="formGroup-label">
           <label for=""><%- @T('Cc') %></label>
         </div>
-        <div class="controls"><input type="text" name="cc" value="<%= @article.cc %>" class="form-control js-mail-inputs"></div>
+        <div class="controls"><input type="text" name="cc" value="<%= @article.cc %>" class="form-control js-mail-inputs js-cc"></div>
       </div>
       <div class="input form-group">
         <div class="formGroup-label">
           <label for=""><%- @T('Subject') %></label>
         </div>
-        <div class="controls"><input type="text" name="subject" value="<%= @article.subject %>" class="form-control js-mail-inputs2"></div>
+        <div class="controls"><input type="text" name="subject" value="<%= @article.subject %>" class="form-control js-mail-inputs2 js-subject"></div>
       </div>
 
       <div class="textBubble js-writeArea">

app/assets/stylesheets/zammad.scss

@@ -6097,6 +6097,16 @@ footer {
   display: inline-flex;
   align-items: center;
   cursor: default;
+  max-width: 100%;
+
+  &.active {
+    background: $highlight-color;
+
+    .close,
+    .token-close {
+      opacity: .5;
+    }
+  }
 }
 
   /*
@@ -6126,6 +6136,9 @@ footer {
 
   .token-label {
     padding: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .tokenfield.form-control {
@@ -6138,7 +6151,7 @@ footer {
   .token .close,
   .token-close {
     margin: 0;
-    padding: 0 9px 0 12px;
+    padding: 0 9px 0 6px;
     font-family: inherit;
     font-weight: 100;
     font-size: 28px;
@@ -6162,6 +6175,34 @@ footer {
   position: absolute;
 }
 
+.ui-menu {
+  background: hsl(240,9%,19%);
+  border: none;
+  color: white;
+  font-family: inherit;
+  font-size: inherit;
+  
+  .ui-menu-item {
+    padding: 9px 15px;
+    list-style-image: none;
+    
+    &:not(:first-child) {
+      box-shadow: 0 1px rgba(255,255,255,.13) inset;
+    }
+
+    &.ui-state-focus {
+      margin: 0;
+      border: none;
+      background: hsl(205,90%,60%);
+      color: inherit;
+
+      + li {
+        box-shadow: none;
+      }
+    }
+  }
+}
+
 .drox {
   color: hsl(60,1%,74%);
 }

app/controllers/users_controller.rb

@@ -391,7 +391,7 @@ class UsersController < ApplicationController
       params[:limit] = 500
     end
 
-    query = params[:query]
+    query = params[:query] || params[:term]
     if query.respond_to?(:permit!)
       query = query.permit!.to_h
     end
@@ -425,14 +425,14 @@ class UsersController < ApplicationController
     end
 
     # build result list
-    if params[:label]
+    if params[:label] || params[:term]
       users = []
       user_all.each do |user|
         realname = user.firstname.to_s + ' ' + user.lastname.to_s
         if user.email && user.email.to_s != ''
-          realname = realname + ' <' + user.email.to_s + '>'
+          realname = "#{realname} <#{user.email}>"
         end
-        a = { id: user.id, label: realname, value: realname }
+        a = { id: user.id, label: realname, value: user.email }
         users.push a
       end