From da9309709bbcb0ef02d4f9aa03370447ad4b08ea Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Tue, 4 Aug 2015 16:56:10 +0200
Subject: [PATCH 1/2] searchable select: add loader icon

---
 .../app/views/generic/searchable_select.jst.eco  |  1 +
 app/assets/stylesheets/zammad.css.scss           | 16 ++++++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/app/assets/javascripts/app/views/generic/searchable_select.jst.eco b/app/assets/javascripts/app/views/generic/searchable_select.jst.eco
index 75abd55b7..889362091 100644
--- a/app/assets/javascripts/app/views/generic/searchable_select.jst.eco
+++ b/app/assets/javascripts/app/views/generic/searchable_select.jst.eco
@@ -13,6 +13,7 @@
     value="<%= @value %>"
   >
   <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
+  <div class="small loading icon"></div>
 </div>
 <ul class="dropdown-menu dropdown-menu-left js-optionsList" role="menu">
   <%- @renderedOptions %>
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 8ea661906..3b3552ced 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -5676,6 +5676,22 @@ output {
   li:not(.is-active):hover + li {
     box-shadow: 0 1px rgba(255,255,255,.13) inset;
   }
+
+  .loading.icon {
+    position: absolute;
+    right: 11px;
+    top: 11px;
+    display: none;
+  }
+
+  &.is-loading {
+    .loading.icon {
+      display: block;
+    }
+    .icon-arrow-down {
+      display: none;
+    }
+  }
 }
 
 .action {

From e7f4f189e07843bb7237744a4eb41c47cde8ec7a Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Tue, 4 Aug 2015 17:43:06 +0200
Subject: [PATCH 2/2] searchableSelect: add autocomplete

---
 .../lib/app_post/searchable_select.js.coffee  | 28 +++++++++++++++-
 .../views/generic/searchable_select.jst.eco   | 11 ++++---
 app/assets/stylesheets/zammad.css.scss        | 32 ++++++++++++++++++-
 3 files changed, 64 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/app/lib/app_post/searchable_select.js.coffee b/app/assets/javascripts/app/lib/app_post/searchable_select.js.coffee
index 99bfe4738..9eae1d37c 100644
--- a/app/assets/javascripts/app/lib/app_post/searchable_select.js.coffee
+++ b/app/assets/javascripts/app/lib/app_post/searchable_select.js.coffee
@@ -2,6 +2,7 @@ class App.SearchableSelect extends Spine.Controller
 
   events:
     'input .js-input':                  'onInput'
+    'blur .js-input':                   'onBlur'
     'click .js-option':                 'selectItem'
     'mouseenter .js-option':            'highlightItem'
     'shown.bs.dropdown':  'onDropdownShown'
@@ -12,6 +13,8 @@ class App.SearchableSelect extends Spine.Controller
     '.js-input': 'input'
     '.js-shadow': 'shadowInput'
     '.js-optionsList': 'optionsList'
+    '.js-autocomplete-invisible': 'invisiblePart'
+    '.js-autocomplete-visible': 'visiblePart'
 
   className: 'searchableSelect dropdown dropdown--actions'
 
@@ -79,6 +82,22 @@ class App.SearchableSelect extends Spine.Controller
 
     @option_items.removeClass('is-active')
     visibleOptions.eq(currentPosition).addClass('is-active')
+    @clearAutocomplete()
+
+  autocomplete: (text) ->
+    startIndex = text.indexOf(@query)
+
+    if !@query or startIndex != 0
+      return @clearAutocomplete()
+
+    console.log "startIndex", startIndex
+
+    @invisiblePart.text(@query)
+    @visiblePart.text(text.slice(@query.length))
+
+  clearAutocomplete: ->
+    @visiblePart.text('')
+    @invisiblePart.text('')
 
   selectItem: (event) ->
     @input.val event.currentTarget.textContent.trim()
@@ -91,6 +110,8 @@ class App.SearchableSelect extends Spine.Controller
     event.preventDefault()
 
   onEnter: (event) ->
+    @clearAutocomplete()
+
     if not @isOpen
       if @shadowInput.val() is ''
         event.preventDefault()
@@ -105,6 +126,9 @@ class App.SearchableSelect extends Spine.Controller
     @shadowInput.trigger('change')
     @toggle()
 
+  onBlur: =>
+    @clearAutocomplete()
+
   onInput: (event) =>
     @toggle() if not @isOpen
 
@@ -123,7 +147,9 @@ class App.SearchableSelect extends Spine.Controller
     @highlightFirst()
 
   highlightFirst: ->
-    @option_items.removeClass('is-active').not('.is-hidden').first().addClass 'is-active'
+    first = @option_items.removeClass('is-active').not('.is-hidden').first()
+    first.addClass 'is-active'
+    @autocomplete first.text()
 
   highlightItem: (event) =>
     @option_items.removeClass('is-active')
diff --git a/app/assets/javascripts/app/views/generic/searchable_select.jst.eco b/app/assets/javascripts/app/views/generic/searchable_select.jst.eco
index 889362091..75f0d7b2a 100644
--- a/app/assets/javascripts/app/views/generic/searchable_select.jst.eco
+++ b/app/assets/javascripts/app/views/generic/searchable_select.jst.eco
@@ -1,9 +1,4 @@
 <div class="dropdown-toggle" data-toggle="dropdown">
-  <input
-    class="form-control js-input<%= " #{ @class }" if @class %>"
-    placeholder="<%= @placeholder %>"
-    value="<%= @valueName %>"
-  >
   <input
     class="searchableSelect-shadow form-control js-shadow"
     id="<%= @id %>"
@@ -12,6 +7,12 @@
     <%= @autofocus %>
     value="<%= @value %>"
   >
+  <div class="searchableSelect-autocomplete"><span class="searchableSelect-autocomplete-invisible js-autocomplete-invisible"></span><span class="searchableSelect-autocomplete-visible js-autocomplete-visible"></span></div>
+  <input
+    class="searchableSelect-main form-control js-input<%= " #{ @class }" if @class %>"
+    placeholder="<%= @placeholder %>"
+    value="<%= @valueName %>"
+  >
   <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
   <div class="small loading icon"></div>
 </div>
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 3b3552ced..69fe22fea 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -5660,9 +5660,20 @@ output {
   .form-control {
     padding-right: 37px;
   }
+
+  .searchableSelect-main {
+    background: none;
+    position: relative;
+  }
   
   .searchableSelect-shadow {
-    display: none;
+    pointer-events: none;
+    color: transparent;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    border: none;
   }
   
   &.dropdown li:hover:not(.is-active) {
@@ -5677,6 +5688,25 @@ output {
     box-shadow: 0 1px rgba(255,255,255,.13) inset;
   }
 
+  .searchableSelect-autocomplete {
+    position: absolute;
+    left: 13px;
+    top: 11px;
+    right: 37px;
+    white-space: nowrap;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  .searchableSelect-autocomplete-invisible {
+    color: transparent;
+  }
+
+  .searchableSelect-autocomplete-visible {
+    color: hsl(0,0%,33%);
+    background: hsl(201,61%,90%);
+  }
+
   .loading.icon {
     position: absolute;
     right: 11px;