Fixes #495 - Adds input clear button

- Adds search input manager for handling input clear button—little (x).
- Disables autocomplete because field highlight color can’t be
overridden.
- Removes unused data-list attributes.
- Adds tests for clearing the input fields.

app/assets/javascripts/search/input-manager.js

@@ -0,0 +1,72 @@
+// Handles functionality of search inputs, such as how the inputs are cleared.
+define(
+function () {
+  'use strict';
+
+  // A list of elements with the clearable class.
+  var _inputs;
+
+  function init() {
+    // Find all elements with the clearable class.
+    _inputs = document.querySelectorAll('.clearable');
+
+    for (var i = 0, len = _inputs.length; i < len; i++) {
+      _initCloseButton(_inputs[i])
+    }
+
+    // Find the global reset button so all search inputs can be cleared.
+    var buttonReset = document.getElementById('button-reset');
+    buttonReset.addEventListener('click', _resetClicked);
+  }
+
+  function _resetClicked(evt) {
+    var closeButton;
+    for (var i = 0, len = _inputs.length; i < len; i++) {
+      closeButton = _inputs[i].querySelector('.button-close');
+      closeButton.classList.add('hide');
+    }
+  }
+
+  // @param inputContainer [Object] The container element enclosing an
+  // input field and close button.
+  function _initCloseButton(inputContainer) {
+
+    // Retrieve first and only input element.
+    var input = inputContainer.getElementsByTagName('input')[0];
+
+    // Create a clear button dynamically.
+    var buttonClear = document.createElement('button');
+    buttonClear.className = 'button-close';
+    if (input.value === '')
+      buttonClear.className += ' hide';
+    inputContainer.appendChild(buttonClear);
+
+    buttonClear.addEventListener('click', function (evt) {
+      evt.preventDefault();
+      input.value = '';
+      buttonClear.classList.add('hide');
+      input.focus();
+    })
+
+    input.addEventListener('keyup', function (evt) {
+      _checkClearButtonVisibility(input, buttonClear);
+    })
+
+    input.addEventListener('change', function (evt) {
+      _checkClearButtonVisibility(input, buttonClear);
+    })
+  }
+
+  // @param input [Object] The input field where a search is entered.
+  // @param buttonClear [Object] The clear button for clearing the form.
+  function _checkClearButtonVisibility(input, buttonClear) {
+    if (input.value === '')
+        buttonClear.classList.add('hide');
+    else
+      buttonClear.classList.remove('hide');
+  }
+
+  return {
+    init:init
+  };
+});

app/assets/javascripts/search/search-init.js

@@ -1,7 +1,11 @@
-// manages search initialization
-require(['search/search-filter-manager'],
-  function (filter) {
+// Manages search initialization.
+require([
+  'search/search-filter-manager',
+  'search/input-manager'
+],
+function (filter, input) {
   'use strict';
 
   filter.init();
+  input.init();
 });

app/assets/stylesheets/_mixins.scss

@@ -73,16 +73,17 @@
 // Turns off proprietary default webkit styling of search input fields.
 @mixin reset-input-webkit()
 {
+  // Turns off iOS input rounding.
   input[type=search]::-webkit-search-cancel-button,
   input[type=search]::-webkit-search-decoration,
   input[type=search]::-webkit-search-results-button,
   input[type=search]::-webkit-search-results-decoration {
-    -webkit-appearance:none;
+    -webkit-appearance: none;
   }
   input[type=search] {
     -webkit-appearance: none;
     border-radius: 0;
-    -webkit-box-sizing:content-box;
+    -webkit-box-sizing: content-box;
   }
 }
 

app/assets/stylesheets/components/_input-search.scss

@@ -25,7 +25,7 @@
     height: 45px;
     padding: 3px;
     padding-left: 45px;
-    padding-right: 6px;
+    padding-right: 25px;
     width: 100%;
     vertical-align: bottom;
 
@@ -38,7 +38,7 @@
     color: $white;
   }
 
-  > button
+  > .button-icon
   {
     cursor: pointer;
     background: none;
@@ -107,7 +107,7 @@
     color: $black;
   }
 
-  > button
+  > .button-icon
   {
     position: absolute;
     top: 0;
@@ -181,7 +181,7 @@
 
   > .filter-input-group
   {
-    > button
+    > .button-icon
     {
       font-size: $font_size_110;
       position: absolute;
@@ -268,3 +268,46 @@
     }
   }
 }
+
+// Clearable input fields have a (x) that can be clicked for clearing the
+// field's content.
+.clearable
+{
+  position: relative;
+
+  &:hover
+  {
+    .button-close {
+      color: rgba($black, .4);
+    }
+  }
+
+  .button-close
+  {
+    position: absolute;
+    right: 0px;
+    top: 50%;
+    margin-top: -15px;
+
+    color: $greyscale_midtone; // IE Fallback
+    color: rgba($black, .1);
+    font-size: $font_size_110;
+
+    border-collapse: collapse;
+    border: none;
+    outline: none;
+    background: transparent;
+  }
+
+  .button-close:after,
+  .button-close::after
+  {
+    content: "×";
+  }
+
+  .button-close:hover
+  {
+    color: $black;
+    cursor: pointer;
+  }
+}

app/views/component/search/_agency.html.haml

@@ -1,6 +1,6 @@
 = field_set_tag nil, id: 'org-name-options', class: 'input-search-filter' do
   = label_tag 'org_name', t('labels.agency_search')
-  = content_tag :div, '', class: 'filter-input-group' do
-    = button_tag(type: 'submit', name: nil) do
+  = content_tag :div, '', class: 'filter-input-group clearable' do
+    = button_tag(type: 'submit', name: nil, class: 'button-icon') do
       = content_tag :i, '', class: 'fa fa-institution'
-    = search_field_tag :org_name, params[:org_name], placeholder: t('placeholders.agency_search'), list: 'search-agency'
+    = search_field_tag :org_name, params[:org_name], autocomplete: 'off', placeholder: t('placeholders.agency_search')

app/views/component/search/_aside.html.haml

@@ -2,21 +2,21 @@
   %section#search-box
     = form_tag('/organizations', method: :get, id: 'search-form') do
       %section#keyword-search-box
-        %div.input-search-small
-          = button_tag(type: 'submit', name: nil, id: 'find-btn', title: 'Search') do
+        %div.input-search-small.clearable
+          = button_tag(type: 'submit', name: nil, id: 'find-btn', class: 'button-icon', title: 'Search') do
             %i{ class: 'fa fa-search' }
-          = search_field_tag :keyword, params[:keyword], placeholder: t('placeholders.results_page_keyword_search'), list: 'search-keywords'
+          = search_field_tag :keyword, params[:keyword], autocomplete: 'off', placeholder: t('placeholders.results_page_keyword_search')
 
       %section#search-options
         = render 'component/search/location'
         = render 'component/search/agency'
 
       %ul#search-controls
         %li
-          = button_tag(type:'submit', name: nil, class: 'update-btn button-small') do
+          = button_tag(type:'submit', name: nil, class: 'button-small update-btn') do
             %i{ class: 'fa fa-refresh' }
             = t('buttons.update_search_results')
         %li
-          = button_tag(type: 'reset', name: nil, id: 'reset-btn', class: 'reset-btn button-small') do
+          = button_tag(type: 'reset', name: nil, id: 'reset-btn', class: 'button-small reset-btn') do
             %i{ class: 'fa fa-times-circle' }
             = t('buttons.clear_search_fields')

app/views/component/search/_box.html.haml

@@ -5,9 +5,9 @@
         %section#keyword-search-box>
           = label_tag 'keyword', t('labels.homepage_search')
           %div.input-search-big
-            = search_field_tag :keyword, params[:keyword], placeholder: t('placeholders.homepage_keyword_search'), list: 'search-keywords'
+            = search_field_tag :keyword, params[:keyword], autocomplete: 'off', placeholder: t('placeholders.homepage_keyword_search')
 
-            = button_tag(type: 'submit', name: nil, id: 'find-btn', title: 'Search') do
+            = button_tag(type: 'submit', name: nil, id: 'find-btn', class: 'button-icon', title: 'Search') do
               %i{ class: 'fa fa-search' }
               %span
                 = t('buttons.homepage_search')

app/views/component/search/_location.html.haml

@@ -1,7 +1,7 @@
 = field_set_tag nil, id: 'location-options', class: 'input-search-filter input-search-filter-option' do
   = label_tag 'location', t('labels.address_search')
-  = content_tag :div, '', class: 'filter-input-group' do
-    = button_tag(type: 'submit', name: nil) do
+  = content_tag :div, '', class: 'filter-input-group clearable' do
+    = button_tag(type: 'submit', name: nil, class: 'button-icon') do
       = content_tag :i, '', class: 'fa fa-map-marker'
-    = search_field_tag :location, params[:location], placeholder: t('placeholders.address_search'), list: 'search-location'
+    = search_field_tag :location, params[:location], autocomplete: 'off', placeholder: t('placeholders.address_search')
   = render 'component/search/geolocate', context_class: 'input-search-filter-option'