Merge pull request #111 from italia/feature/105-autocomplete

Feature/105 autocomplete

dist/js/bootstrap-italia.bundle.js

@@ -16749,6 +16749,92 @@ var Tab = function ($) {
   return Tab;
 }($);
 
+'use strict';
+
+$.fn.autocomplete = function (options) {
+
+  // Default options
+  var defaults = {
+    data: {}
+  };
+
+  var ENTER_CHAR_CODE = 13;
+
+  // Get options
+  options = $.extend(defaults, options);
+
+  return this.each(function () {
+
+    // text input
+    var $input = $(this);
+    var $autocomplete = void 0;
+
+    // assign data from options
+    var data = eval($(this).attr("data-db"));
+
+    if (Object.keys(data).length) {
+
+      $autocomplete = $('<ul class="autocomplete-wrap"></ul>');
+
+      $autocomplete.insertAfter($(this));
+    };
+
+    // add button clear
+    $input.after('<button class="autocomplete-clear"><svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /><path d="M0 0h24v24H0z" fill="none" /></svg></button>');
+
+    // Listen if key was pressed
+    $input.on('keyup', function (e) {
+
+      // get value from input
+      var q = $input.val();
+
+      $autocomplete.empty();
+
+      // check if input isn't empty
+      if (q.length) {
+
+        for (var item in data) {
+
+          // check if item contains value that we're looking for
+          if (data[item].toLowerCase().indexOf(q.toLowerCase()) !== -1) {
+            var option = $('<li>' + data[item] + '</li>');
+
+            $autocomplete.append(option);
+          }
+        }
+      }
+
+      if (e.which === ENTER_CHAR_CODE) {
+        $autocomplete.children(":first").trigger('click');
+        $autocomplete.empty();
+      }
+
+      if (q.length === 0) {
+        $('.autocomplete-clear').css('visibility', 'hidden');
+      } else {
+        $('.autocomplete-clear').css('visibility', 'visible');
+      }
+    });
+
+    $autocomplete.on('click', 'li', function () {
+
+      // Set input value after click
+      $input.val($(this).text());
+
+      // Clear autocomplete
+      $autocomplete.empty();
+    });
+
+    $('.autocomplete-clear').on('click', function (e) {
+      e.preventDefault();
+      $input.val('');
+      $(this).css('visibility', 'hidden');
+      $autocomplete.empty();
+      $(this).parent().find('label').removeClass('active');
+    });
+  });
+};
+
 /**
  * --------------------------------------------------------------------------
  * Bootstrap (v4.0.0): cookiebar.js
@@ -17548,6 +17634,8 @@ $(function () {
   $('input:password').each(function (e) {
     $(this).siblings('label').after('<span class="btn-eye eye-on" toggle="' + $(this).attr("id") + '"></span>');
   });
+
+  $('.autocomplete').autocomplete();
 });
 
 /**

dist/js/bootstrap-italia.js

@@ -3885,6 +3885,92 @@ var Tab = function ($) {
   return Tab;
 }($);
 
+'use strict';
+
+$.fn.autocomplete = function (options) {
+
+  // Default options
+  var defaults = {
+    data: {}
+  };
+
+  var ENTER_CHAR_CODE = 13;
+
+  // Get options
+  options = $.extend(defaults, options);
+
+  return this.each(function () {
+
+    // text input
+    var $input = $(this);
+    var $autocomplete = void 0;
+
+    // assign data from options
+    var data = eval($(this).attr("data-db"));
+
+    if (Object.keys(data).length) {
+
+      $autocomplete = $('<ul class="autocomplete-wrap"></ul>');
+
+      $autocomplete.insertAfter($(this));
+    };
+
+    // add button clear
+    $input.after('<button class="autocomplete-clear"><svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /><path d="M0 0h24v24H0z" fill="none" /></svg></button>');
+
+    // Listen if key was pressed
+    $input.on('keyup', function (e) {
+
+      // get value from input
+      var q = $input.val();
+
+      $autocomplete.empty();
+
+      // check if input isn't empty
+      if (q.length) {
+
+        for (var item in data) {
+
+          // check if item contains value that we're looking for
+          if (data[item].toLowerCase().indexOf(q.toLowerCase()) !== -1) {
+            var option = $('<li>' + data[item] + '</li>');
+
+            $autocomplete.append(option);
+          }
+        }
+      }
+
+      if (e.which === ENTER_CHAR_CODE) {
+        $autocomplete.children(":first").trigger('click');
+        $autocomplete.empty();
+      }
+
+      if (q.length === 0) {
+        $('.autocomplete-clear').css('visibility', 'hidden');
+      } else {
+        $('.autocomplete-clear').css('visibility', 'visible');
+      }
+    });
+
+    $autocomplete.on('click', 'li', function () {
+
+      // Set input value after click
+      $input.val($(this).text());
+
+      // Clear autocomplete
+      $autocomplete.empty();
+    });
+
+    $('.autocomplete-clear').on('click', function (e) {
+      e.preventDefault();
+      $input.val('');
+      $(this).css('visibility', 'hidden');
+      $autocomplete.empty();
+      $(this).parent().find('label').removeClass('active');
+    });
+  });
+};
+
 /**
  * --------------------------------------------------------------------------
  * Bootstrap (v4.0.0): cookiebar.js
@@ -4684,6 +4770,8 @@ $(function () {
   $('input:password').each(function (e) {
     $(this).siblings('label').after('<span class="btn-eye eye-on" toggle="' + $(this).attr("id") + '"></span>');
   });
+
+  $('.autocomplete').autocomplete();
 });
 
 /**

docs/componenti/form.md

@@ -22,6 +22,12 @@ Gli elementi del form come `<input>`, `<select>` e `<textarea>` sono graficament
 
 {% capture example %}
 <form>
+  <div class="input-group pb-3">
+    <div class="input-group-prepend">
+      <span class="input-group-text it-search" id="basic-addon1"></span>
+    </div>
+    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
+  </div>
   <div class="form-group">
     <input type="text" class="form-control" id="exampleInputText">
     <label for="exampleInputText">Nominativo</label>
@@ -99,6 +105,36 @@ Eccoti un esempio in funzione per la traduzione in inglese:
 
 È necessario impostare correttamente la lingua del documento (o dell'albero secondario) in modo che venga visualizzato il testo corretto. Questo può essere fatto usando [l'attributo `lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) sull'elemento `<html>` o modificando il [`Content-Language` HTTP header](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12) ad esempio.
 
+### Input autocomplete
+
+Per ottenere l'autocomplete bisogna aggiungere all'input la classe `.autocomplete` e l'attributo `.data-db` con il nome della variabile javascript che contiene l'array da filtrare oppure il nome della funzione che dinamicamente restituirà un array. 
+
+<script>
+  function functionRegioni() {
+    var regioni = [
+    {% for regione in site.data.regioni %}"{{ regione }}",{% endfor %}
+    "Tutte"
+    ];
+    return regioni
+  }
+  var regioni = [
+    {% for regione in site.data.regioni %}"{{ regione }}",{% endfor %}
+    "Tutte"
+  ];
+</script>
+{% example html %}
+<form>
+  <div class="form-group">
+    <input type="search" id="autocomplete1" class="form-control autocomplete" data-db="regioni">
+    <label for="autocomplete1">Regione</label>
+  </div>
+  <div class="form-group">
+    <input type="search" id="autocomplete2" class="form-control autocomplete" data-db="functionRegioni()">
+    <label for="autocomplete2">Regione (con caricamento tramite funzione)</label>
+  </div>
+</form>
+{% endexample %}
+
 ### Select
 
 Per ottenere un menù a tendina conforme alle linee guida, è sufficiente aggiungere al tag `<select>` la classe `.custom-select` e seguire le indicazioni riportate di seguito. Il componente _select_ è molto flessibile, in quanto permette selezioni multiple, ricerca contestuale, e raggruppamenti delle opzioni disponibili.

gulpfile.js

@@ -42,6 +42,7 @@ const Paths = {
     './node_modules/bootstrap/js/src/popover.js',
     './node_modules/bootstrap/js/src/scrollspy.js',
     './node_modules/bootstrap/js/src/tab.js',
+    './src/js/plugins/autocomplete.js',
     './src/js/plugins/cookiebar.js',
     './src/js/plugins/image-grid.js',
     './src/js/plugins/zoom.js',

src/js/plugins/autocomplete.js

@@ -0,0 +1,85 @@
+'use strict';
+
+$.fn.autocomplete = function (options) {
+
+  // Default options
+  var defaults = {
+    data: {}
+  };
+
+  var ENTER_CHAR_CODE = 13;
+
+  // Get options
+  options = $.extend(defaults, options);
+
+  return this.each(function () {
+
+    // text input
+    var $input = $(this);
+    var $autocomplete = void 0;
+
+    // assign data from options
+    var data = eval($(this).attr("data-db"));
+
+    if (Object.keys(data).length) {
+
+      $autocomplete = $('<ul class="autocomplete-wrap"></ul>');
+
+      $autocomplete.insertAfter($(this));
+    };
+
+    // add button clear
+    $input.after('<button class="autocomplete-clear"><svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /><path d="M0 0h24v24H0z" fill="none" /></svg></button>');
+
+    // Listen if key was pressed
+    $input.on('keyup', function (e) {
+
+      // get value from input
+      var q = $input.val();
+
+      $autocomplete.empty();
+
+      // check if input isn't empty
+      if (q.length) {
+
+        for (var item in data) {
+
+          // check if item contains value that we're looking for
+          if (data[item].toLowerCase().indexOf(q.toLowerCase()) !== -1) {
+            var option = $('<li>' + data[item] + '</li>');
+
+            $autocomplete.append(option);
+          }
+        }
+      }
+
+      if (e.which === ENTER_CHAR_CODE) {
+        $autocomplete.children(":first").trigger('click');
+        $autocomplete.empty();
+      }
+
+      if (q.length === 0) {
+        $('.autocomplete-clear').css('visibility', 'hidden');
+      } else {
+        $('.autocomplete-clear').css('visibility', 'visible');
+      }
+    });
+
+    $autocomplete.on('click', 'li', function () {
+
+      // Set input value after click
+      $input.val($(this).text());
+
+      // Clear autocomplete
+      $autocomplete.empty();
+    });
+
+    $('.autocomplete-clear').on('click', function (e) {
+      e.preventDefault();
+      $input.val('');
+      $(this).css('visibility', 'hidden');
+      $autocomplete.empty();
+      $(this).parent().find('label').removeClass('active');
+    });
+  });
+};

src/js/plugins/forms.js

@@ -35,6 +35,6 @@ $(function () {
   $('input:password').each(function (e) {
     $(this).siblings('label').after('<span class="btn-eye eye-on" toggle="' + $(this).attr("id") + '"></span>');
   });
-});
-
 
+  $('.autocomplete').autocomplete();
+});