Configurable debounce delay

API.md

@@ -117,6 +117,7 @@ A geocoder component using the [Mapbox Geocoding API][67]
     -   `options.fuzzyMatch` **[Boolean][73]** Specify whether the Geocoding API should attempt approximate, as well as exact, matching when performing searches, or whether it should opt out of this behavior and only attempt exact matching. (optional, default `true`)
     -   `options.routing` **[Boolean][73]** Specify whether to request additional metadata about the recommended navigation destination corresponding to the feature or not. Only applicable for address features. (optional, default `false`)
     -   `options.worldview` **[String][69]** Filter results to geographic features whose characteristics are defined differently by audiences belonging to various regional, cultural, or political groups. (optional, default `"us"`)
+    -   `options.debounceDelay` **[Number][72]** Specify the input debounce delay (in milliseconds). (optional, default `200`)
 
 ### Examples
 

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## master
 
+### Features / Improvements 🚀
+
+- Configurable debounce delay [#436](https://github.com/mapbox/mapbox-gl-geocoder/pull/436)
+
 ## 4.7.4
 
 ### Features / Improvements 🚀

lib/index.js

@@ -63,6 +63,7 @@ const GEOCODE_REQUEST_TYPE = {
  * @param {Boolean} [options.fuzzyMatch=true] Specify whether the Geocoding API should attempt approximate, as well as exact, matching when performing searches, or whether it should opt out of this behavior and only attempt exact matching.
  * @param {Boolean} [options.routing=false] Specify whether to request additional metadata about the recommended navigation destination corresponding to the feature or not. Only applicable for address features.
  * @param {String} [options.worldview="us"] Filter results to geographic features whose characteristics are defined differently by audiences belonging to various regional, cultural, or political groups.
+ * @param {Number} [options.debounceDelay=200] Specify the input debounce delay (in milliseconds).
  * @example
  * var geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken });
  * map.addControl(geocoder);
@@ -93,6 +94,7 @@ MapboxGeocoder.prototype = {
     collapsed: false,
     clearAndBlurOnEsc: false,
     clearOnBlur: false,
+    debounceDelay: 200,
     getItemValue: function(item) {
       return item.place_name
     },
@@ -214,7 +216,7 @@ MapboxGeocoder.prototype = {
       this._inputEl.addEventListener('blur', this._onBlur);
     }
 
-    this._inputEl.addEventListener('keydown', debounce(this._onKeyDown, 200));
+    this._inputEl.addEventListener('keydown', debounce(this._onKeyDown, this.options.debounceDelay));
     this._inputEl.addEventListener('paste', this._onPaste);
     this._inputEl.addEventListener('change', this._onChange);
     this.container.addEventListener('mouseenter', this._showButton);