Tami/boolean operators

auto-complete.css

@@ -7,3 +7,30 @@
 .autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; }
 .autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; }
 .autocomplete-suggestion.selected { background: #f0f0f0; }
+
+.autocomplete-chip {
+    border: 1px solid transparent;
+    margin-right: 12px;
+}
+
+.autocomplete-chip:hover {
+    border-color:black;
+}
+
+.autocomplete-chip::before {
+    font-size: 14px;
+    line-height: 16px;
+    letter-spacing: 0.4px;
+}
+
+.autocomplete-boolean-button {
+    font-size: 10px;
+    line-height: 16px;
+    margin-inline-start: 10px;
+    align-items: center;
+    letter-spacing: 0.4px; 
+}
+
+.row{
+    margin-inline-start: 5px;
+}

auto-complete.js

@@ -62,6 +62,78 @@
             });
         }
 
+
+    function createTooltipChip(tooltip, text) {
+
+            return (
+              '<span class="autocomplete-chip chip chip--outline chip--sm tooltip-lg" data-toggle="tooltip" data-placement="bottom-right" data-tooltip ="' +
+              tooltip +
+              '">' +
+              text +
+              '</span>'
+            );
+       }
+
+       var booleanTooltips = (
+          '<div class="row">' +
+          createTooltipChip('Identifique as palavras ou termos que, obrigatoriamente,estejam na sua pesquisa. Exemplo: Direitos E Humanos', 'E') +
+          createTooltipChip('Identifique palavras ou termos para obter resultados com pelo menos uma das palavras-chave especificadas. É possível utilizar parênteses para agrupar frases. Exemplo: (Dano moral) OU (Recurso Especial)', 'OU') +
+          createTooltipChip('Nenhum dos resultados conterão o(s) termo(s) excludentes, indicados após o NÃO. Exemplo: (dano moral) NÃO material', 'Não Incluir') +
+          createTooltipChip('Os resultados conterão os termos na ordem exata e com a exata grafia indicada. Exemplo: princípio da presunção de inocência', 'Exatamente') +
+          '</div>'
+        );
+
+        function cumulativeOffset(element) {
+            var top = 0;
+            var left = 0;
+            do {
+              top += element.offsetTop || 0;
+              left += element.offsetLeft || 0;
+              element = element.offsetParent;
+            } while (element);
+            return {
+              top: top,
+              left: left,
+            };
+        }
+
+        function createOverElemTooltip() {
+            var pos = cumulativeOffset(this);
+            // + 1 to consider border as offset
+            var left = pos.left + 1;
+            var top = pos.top + 1;
+            var clonedNode = this.cloneNode(true);
+            clonedNode.style =
+            'color:transparent;box-shadow:none;z-index:10000;position:absolute;left:' + left + 'px;top:' + top + 'px';
+
+            addEvent(clonedNode, 'mouseout', function () {
+
+            });
+            document.body.appendChild(clonedNode);
+        }
+
+        function replaceButtonWithTooltips() {
+            var parentElement = this.parentElement;
+            if (parentElement) {
+                parentElement.innerHTML = booleanTooltips;
+
+            var chips = document.getElementsByClassName('autocomplete-chip');
+            for (var i = 0; i < chips.length; i++) {
+                    var chip = chips[i];
+                    addEvent(chip, 'mouseenter', createOverElemTooltip);
+                }
+            }
+        }
+
+        var footerBooleanOperators = (
+          '<hr style= "width: 575px">' +
+          '<div>' +
+          '<button class="btn btn--flat btn--sm btn--blue autocomplete-boolean-button">' +
+          'DICAS PARA ESPECIFICAR SUA BUSCA' +
+          '</button>' +
+          '</div>'
+        );
+
         var o = {
             selector: 0,
             source: 0,
@@ -81,7 +153,8 @@
             queryHistoryStorageName: null,
             formSelector: null,
             buildTerm: function (term) { return term },
-            target: null
+            target: null,
+            enableFooterBooleanOperators: false
         };
         for (var k in options) { if (options.hasOwnProperty(k)) o[k] = options[k]; }
 
@@ -170,6 +243,8 @@
                 removeQueryFromLocalStorage(o.queryHistoryStorageName, rawData[index]);
             }, that.sc);
 
+            live('autocomplete-boolean-button', 'click', replaceButtonWithTooltips);
+
             that.blurHandler = function () {
                 try { var over_sb = document.querySelector('.autocomplete-suggestions:hover'); } catch (e) { var over_sb = 0; }
                 if (!over_sb) {
@@ -196,7 +271,7 @@
                 if (data.length) {
                     var s = '';
                     for (var i = 0; i < data.length; i++) s += o.renderItem(data[i], val, i);
-                    that.sc.innerHTML = s;
+                    that.sc.innerHTML = s + (o.enableFooterBooleanOperators ? footerBooleanOperators : '');
                     that.updateSC(0);
                 }
                 else

demo.html

@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300">
     <link rel="stylesheet" href="https://cdn.rawgit.com/yahoo/pure-release/v0.6.0/pure-min.css">
+    <link rel="stylesheet" href="https://static.jusbr.com/mystique/2.18.5/css/mystique.min.css">
     <style>
         body { margin: 0; padding: 0; border: 0; min-width: 320px; color: #777; }
         html, button, input, select, textarea, .pure-g [class *= "pure-u"] { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.02em; }
@@ -273,6 +274,7 @@ <h4>Advanced suggestions handling and custom layout</h4>
         var demo1 = new autoComplete({
             selector: '#hero-demo',
             minChars: 1,
+            enableFooterBooleanOperators: true,
             source: function(term, suggest){
                 term = term.toLowerCase();
                 var choices = ['ActionScript', 'AppleScript', 'Asp', 'Assembly', 'BASIC', 'Batch', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'PowerShell', 'Python', 'Ruby', 'Scala', 'Scheme', 'SQL', 'TeX', 'XML'];

package.json

@@ -25,7 +25,8 @@
   },
   "jest": {
     "collectCoverageFrom": [
-      "utils/*.{js,jsx}","./auto-complete.js"
+      "utils/*.{js,jsx}",
+      "./auto-complete.js"
     ],
     "testRegex": "tests/.*",
     "testPathIgnorePatterns": [

tests/auto-complete.js

@@ -359,4 +359,15 @@ describe('Autocomplete Instance', function () {
         // THEN
         expect(queries).toBe(null);
     });
-})
+
+})
+
+     function renderText(tooltip, text) {
+
+    return '<span class="autocomplete-chip chip chip--outline chip--sm tooltip-lg" data-toggle="tooltip" data-placement="bottom-right" data-tooltip ="' + tooltip +
+    '">' +
+    text +
+    '</span>';
+}
+
+