feat(appendTo): new parameter

algolia · Jan 6, 2017 · e40cbd0 · e40cbd0
1 parent be1dc19
commit e40cbd0
Show file tree

Hide file tree

Showing 13 changed files with 371 additions and 241 deletions.
diff --git a/src/angular/directive.js b/src/angular/directive.js
@@ -75,7 +75,8 @@ angular.module('algolia.autocomplete', [])
             debug: scope.options.debug,
             cssClasses: scope.options.cssClasses,
             datasets: scope.datasets,
-            keyboardShortcuts: scope.options.keyboardShortcuts
+            keyboardShortcuts: scope.options.keyboardShortcuts,
+            appendTo: scope.options.appendTo
           });
         }
 

diff --git a/src/autocomplete/css.js b/src/autocomplete/css.js
@@ -61,6 +61,18 @@ var css = {
     cursor: 'cursor',
     dataset: 'dataset',
     empty: 'empty'
+  },
+  appendTo: {
+    wrapper: {
+      position: 'absolute',
+      zIndex: '100',
+      display: 'none'
+    },
+    input: {},
+    inputWithNoHint: {},
+    dropdown: {
+      display: 'block'
+    }
   }
 };
 

diff --git a/src/autocomplete/dataset.js b/src/autocomplete/dataset.js
@@ -37,6 +37,7 @@ function Dataset(o) {
 
   this.templates = getTemplates(o.templates, this.displayFn);
 
+  this.css = _.mixin({}, css, o.appendTo ? css.appendTo : {});
   this.cssClasses = _.mixin({}, css.defaultClasses, o.cssClasses || {});
 
   var clazz = _.className(this.cssClasses.prefix, this.cssClasses.dataset);
@@ -126,7 +127,7 @@ _.mixin(Dataset.prototype, EventEmitter, {
       var suggestionsHtml = html.suggestions.
         replace('%PREFIX%', this.cssClasses.prefix).
         replace('%SUGGESTIONS%', this.cssClasses.suggestions);
-      $suggestions = DOM.element(suggestionsHtml).css(css.suggestions);
+      $suggestions = DOM.element(suggestionsHtml).css(this.css.suggestions);
 
       // jQuery#append doesn't support arrays as the first argument
       // until version 1.8, see http://bugs.jquery.com/ticket/11231
@@ -147,7 +148,7 @@ _.mixin(Dataset.prototype, EventEmitter, {
         $el.data(datasetKey, that.name);
         $el.data(valueKey, that.displayFn(suggestion) || undefined); // this led to undefined return value
         $el.data(datumKey, JSON.stringify(suggestion));
-        $el.children().each(function() { DOM.element(this).css(css.suggestionChild); });
+        $el.children().each(function() { DOM.element(this).css(self.css.suggestionChild); });
 
         return $el;
       }

diff --git a/src/autocomplete/dropdown.js b/src/autocomplete/dropdown.js
@@ -31,8 +31,10 @@ function Dropdown(o) {
   this.isOpen = false;
   this.isEmpty = true;
   this.minLength = o.minLength || 0;
-  this.cssClasses = _.mixin({}, css.defaultClasses, o.cssClasses || {});
   this.templates = {};
+  this.appendTo = o.appendTo || false;
+  this.css = _.mixin({}, css, o.appendTo ? css.appendTo : {});
+  this.cssClasses = o.cssClasses = _.mixin({}, css.defaultClasses, o.cssClasses || {});
 
   // bound functions
   onSuggestionClick = _.bind(this._onSuggestionClick, this);
@@ -45,6 +47,11 @@ function Dropdown(o) {
     .on('mouseenter.aa', cssClass, onSuggestionMouseEnter)
     .on('mouseleave.aa', cssClass, onSuggestionMouseLeave);
 
+  this.$input = o.input;
+  this.$wrapper = o.wrapper;
+
+  this.$container = o.appendTo ? this.$wrapper : this.$menu;
+
   if (o.templates && o.templates.header) {
     this.templates.header = _.templatify(o.templates.header);
     this.$menu.prepend(this.templates.header());
@@ -73,6 +80,11 @@ function Dropdown(o) {
     this.templates.footer = _.templatify(o.templates.footer);
     this.$menu.append(this.templates.footer());
   }
+
+  var self = this;
+  DOM.element(window).resize(function() {
+    self._redraw();
+  });
 }
 
 // instance methods
@@ -162,17 +174,38 @@ _.mixin(Dropdown.prototype, EventEmitter, {
   },
 
   _hide: function() {
-    this.$menu.hide();
+    this.$container.hide();
   },
 
   _show: function() {
     // can't use jQuery#show because $menu is a span element we want
     // display: block; not dislay: inline;
-    this.$menu.css('display', 'block');
+    this.$container.css('display', 'block');
+
+    this._redraw();
 
     this.trigger('shown');
   },
 
+  _redraw: function redraw() {
+    if (!this.isOpen || !this.appendTo) return;
+
+    var inputRect = this.$input[0].getBoundingClientRect();
+
+    this.$wrapper.css('width', inputRect.width + 'px');
+    this.$wrapper.css('top', 0 + 'px');
+    this.$wrapper.css('left', 0 + 'px');
+
+    var wrapperRect = this.$wrapper[0].getBoundingClientRect();
+
+    var top = inputRect.bottom - wrapperRect.top;
+    this.$wrapper.css('top', top + 'px');
+    var left = inputRect.left - wrapperRect.left;
+    this.$wrapper.css('left', left + 'px');
+
+    this.trigger('redrawn');
+  },
+
   _getSuggestions: function getSuggestions() {
     return this.$menu.find(_.className(this.cssClasses.prefix, this.cssClasses.suggestion));
   },
@@ -272,7 +305,7 @@ _.mixin(Dropdown.prototype, EventEmitter, {
   },
 
   setLanguageDirection: function setLanguageDirection(dir) {
-    this.$menu.css(dir === 'ltr' ? css.ltr : css.rtl);
+    this.$menu.css(dir === 'ltr' ? this.css.ltr : this.css.rtl);
   },
 
   moveCursorUp: function moveCursorUp() {

diff --git a/src/autocomplete/typeahead.js b/src/autocomplete/typeahead.js
@@ -31,12 +31,22 @@ function Typeahead(o) {
   this.autoselectOnBlur = !!o.autoselectOnBlur;
   this.openOnFocus = !!o.openOnFocus;
   this.minLength = _.isNumber(o.minLength) ? o.minLength : 1;
+
+  o.hint = !!o.hint;
+
+  if (o.hint && o.appendTo) {
+    throw new Error('[autocomplete.js] hint and appendTo options can\'t be used at the same time');
+  }
+
+  this.css = o.css = _.mixin({}, css, o.appendTo ? css.appendTo : {});
   this.cssClasses = o.cssClasses = _.mixin({}, css.defaultClasses, o.cssClasses || {});
-  this.$node = buildDom(o);
 
-  $menu = this.$node.find(_.className(this.cssClasses.prefix, this.cssClasses.dropdownMenu));
-  $input = this.$node.find(_.className(this.cssClasses.prefix, this.cssClasses.input));
-  $hint = this.$node.find(_.className(this.cssClasses.prefix, this.cssClasses.hint));
+  var domElts = buildDom(o);
+
+  this.$node = domElts.wrapper;
+  $menu = domElts.menu;
+  $input = domElts.input;
+  $hint = domElts.hint;
 
   if (o.dropdownMenuContainer) {
     DOM.element(o.dropdownMenuContainer)
@@ -64,7 +74,16 @@ function Typeahead(o) {
 
   this.eventBus = o.eventBus || new EventBus({el: $input});
 
-  this.dropdown = new Typeahead.Dropdown({menu: $menu, datasets: o.datasets, templates: o.templates, cssClasses: this.cssClasses, minLength: this.minLength})
+  this.dropdown = new Typeahead.Dropdown({
+    input: $input,
+    appendTo: o.appendTo,
+    wrapper: this.$node,
+    menu: $menu,
+    datasets: o.datasets,
+    templates: o.templates,
+    cssClasses: o.cssClasses,
+    minLength: this.minLength
+  })
     .onSync('suggestionClicked', this._onSuggestionClicked, this)
     .onSync('cursorMoved', this._onCursorMoved, this)
     .onSync('cursorRemoved', this._onCursorRemoved, this)
@@ -439,21 +458,21 @@ function buildDom(options) {
   var $hint;
 
   $input = DOM.element(options.input);
-  $wrapper = DOM.element(html.wrapper.replace('%ROOT%', options.cssClasses.root)).css(css.wrapper);
+  $wrapper = DOM.element(html.wrapper.replace('%ROOT%', options.cssClasses.root)).css(options.css.wrapper);
   // override the display property with the table-cell value
   // if the parent element is a table and the original input was a block
   //  -> https://github.com/algolia/autocomplete.js/issues/16
-  if ($input.css('display') === 'block' && $input.parent().css('display') === 'table') {
+  if (!options.appendTo && $input.css('display') === 'block' && $input.parent().css('display') === 'table') {
     $wrapper.css('display', 'table-cell');
   }
   var dropdownHtml = html.dropdown.
     replace('%PREFIX%', options.cssClasses.prefix).
     replace('%DROPDOWN_MENU%', options.cssClasses.dropdownMenu);
-  $dropdown = DOM.element(dropdownHtml).css(css.dropdown);
+  $dropdown = DOM.element(dropdownHtml).css(options.css.dropdown);
   if (options.templates && options.templates.dropdownMenu) {
     $dropdown.html(_.templatify(options.templates.dropdownMenu)());
   }
-  $hint = $input.clone().css(css.hint).css(getBackgroundStyles($input));
+  $hint = $input.clone().css(options.css.hint).css(getBackgroundStyles($input));
 
   $hint
     .val('')
@@ -477,7 +496,7 @@ function buildDom(options) {
   $input
     .addClass(_.className(options.cssClasses.prefix, options.cssClasses.input, true))
     .attr({autocomplete: 'off', spellcheck: false})
-    .css(options.hint ? css.input : css.inputWithNoHint);
+    .css(options.hint ? options.css.input : options.css.inputWithNoHint);
 
   // ie7 does not like it when dir is set to auto
   try {
@@ -488,11 +507,20 @@ function buildDom(options) {
     // ignore
   }
 
-  return $input
-    .wrap($wrapper)
-    .parent()
+  $wrapper = options.appendTo
+    ? $wrapper.appendTo(DOM.element(options.appendTo).eq(0)).eq(0)
+    : $input.wrap($wrapper).parent();
+
+  $wrapper
     .prepend(options.hint ? $hint : null)
     .append($dropdown);
+
+  return {
+    wrapper: $wrapper,
+    input: $input,
+    hint: $hint,
+    menu: $dropdown
+  };
 }
 
 function getBackgroundStyles($el) {

diff --git a/src/jquery/plugin.js b/src/jquery/plugin.js
@@ -62,7 +62,8 @@ methods = {
         debug: o.debug,
         cssClasses: o.cssClasses,
         datasets: datasets,
-        keyboardShortcuts: o.keyboardShortcuts
+        keyboardShortcuts: o.keyboardShortcuts,
+        appendTo: o.appendTo
       });
 
       $input.data(typeaheadKey, typeahead);

diff --git a/src/standalone/index.js b/src/standalone/index.js
@@ -46,7 +46,8 @@ function autocomplete(selector, options, datasets, typeaheadObject) {
       debug: options.debug,
       cssClasses: options.cssClasses,
       datasets: datasets,
-      keyboardShortcuts: options.keyboardShortcuts
+      keyboardShortcuts: options.keyboardShortcuts,
+      appendTo: options.appendTo
     });
 
     $input.data(typeaheadKey, typeahead);

diff --git a/test/integration/test.html b/test/integration/test.html
@@ -95,24 +95,33 @@
         'this is a very long value so deal with it otherwise you gonna have a hard time'
       ];
 
-      $('#states').autocomplete({ }, [
-        {
-          displayKey: 'name',
-          source: function(q, cb) {
-            var res = [];
-            if (!q) {
-              cb([]);
-              return;
-            }
-            for (var i = 0; i < states.length; ++i) {
-              if (states[i].toLowerCase().indexOf(q.toLowerCase()) === 0) {
-                res.push({ name: states[i] });
+      function buildAutocomplete (options) {
+        if (options === undefined) options = { };
+        if (window.autocomplete) {
+          window.autocomplete.autocomplete.destroy();
+          window.autocomplete = null;
+        }
+        window.autocomplete = $('#states').autocomplete(options, [
+          {
+            displayKey: 'name',
+            source: function(q, cb) {
+              var res = [];
+              if (!q) {
+                cb([]);
+                return;
+              }
+              for (var i = 0; i < states.length; ++i) {
+                if (states[i].toLowerCase().indexOf(q.toLowerCase()) === 0) {
+                  res.push({ name: states[i] });
+                }
               }
+              cb(res);
             }
-            cb(res);
           }
-        }
-      ]);
+        ]);
+      }
+
+      buildAutocomplete();
     </script>
   </body>
 </html>