Add anchor element for custom position of autocomplete

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Danqing Liu
+Copyright (c) 2017 Danqing Liu
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,4 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-

README.md

@@ -21,7 +21,7 @@ npm install remote-ac --save
 
 ```js
 var AC = require('remote-ac');
-var ac = new AC(input, urlFn, requestFn, resultFn, rowFn, triggerFn);
+var ac = new AC(input, urlFn, requestFn, resultFn, rowFn, triggerFn, anchorEl);
 ```
 
 where:
@@ -32,6 +32,7 @@ where:
 * `resultFn` is the function that processes the returned results, in case you have some custom format. It takes the raw HTTP response, and returns a list of autocomplete results. If the response is already a list of results, you do not need to specify this function.
 * `rowFn` is the function that takes the data of a row to render the row in the DOM. If it is not provided, autocomplete will generate the rows automatically.
 * `triggerFn` is the function called when the user clicks on an autocomplete row. The result associated with the row will be passed in as the parameter.
+* `anchorEl` is the element to position the autocomplete against, in case you don't want it to be positioned below the input element.
 
 If you would like to use the default row rendering function, you can have a primary text label and an optional secondary text label. The default keys to them are `title` and `subtitle`, i.e.:
 
@@ -61,20 +62,18 @@ var service = new google.maps.places.PlacesService(...);
 // Custom request function.
 var requestFn = function(query) {
   if (!query) {
-    ac.results = [];
-    ac.render();
+    this.results = [];
+    this.render();
     return;
   }
 
-  var callback = function(results, status) {
-    if (status != google.maps.places.PlacesServiceStatus.OK) {
-      ac.results = [];
-    } else {
-      ac.results = results;
+  service.textSearch({query: query}, (results, status) => {
+    this.results = [];
+    if (status === google.maps.places.PlacesServiceStatus.OK) {
+      this.results = results.length > 5 ? results.slice(0, 5) : results;
     }
-    ac.render();
-  };
-  service.textSearch({query: query}, callback);
+    this.render();
+  });
 };
 
 var triggerFn = function(obj) {

ac.js

@@ -28,12 +28,18 @@
  *     render the rows with the default `createRow` function.
  * @param {Function} triggerFn The optional function called when an
  *     autocomplete result is selected.
+ * @param {Element} anchorEl The optional DOM element to attach the autocomplete
+ *     to. If not provided, the autocomplete is attached to the input element.
  * @constructor
  */
-var AC = function init(inputEl, urlFn, requestFn, resultFn, rowFn, triggerFn) {
+var AC = function init(inputEl, urlFn, requestFn, resultFn, rowFn, triggerFn,
+    anchorEl) {
   /** @type {Element} The input element to attach to. */
   this.inputEl = inputEl;
 
+  /** @type {Element} The element to position the autocomplete below. */
+  this.anchorEl = anchorEl || inputEl;
+
   /** @type {Function} */
   this.triggerFn = triggerFn;
 
@@ -160,12 +166,6 @@ AC.CLASS = {
 /** Activates the autocomplete for mounting on input focus. */
 AC.prototype.activate = function activate() {
   this.inputEl.addEventListener('focus', this.mount.bind(this));
-  // var blur = function blur() {
-  //   setTimeout(function b() {
-  //     this.unmount();
-  //   }.bind(this), 50);
-  // };
-  // this.inputEl.addEventListener('blur', blur.bind(this));
 };
 
 /** Mounts the autocomplete. */
@@ -216,8 +216,8 @@ AC.prototype.unmount = function unmount() {
 
 /** Positions the autocomplete to be right beneath the input. */
 AC.prototype.position = function position() {
-  var rect = this.inputEl.getBoundingClientRect();
-  var offset = AC.findPosition(this.inputEl);
+  var rect = this.anchorEl.getBoundingClientRect();
+  var offset = AC.findPosition(this.anchorEl);
   this.el.style.top = offset.top + rect.height + 'px';
   this.el.style.left = offset.left + 'px';
   this.el.style.width = rect.width + 'px';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "remote-ac",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "Autocomplete for remote data",
   "repository": "danqing/autocomplete",
   "author": "Danqing Liu",