@geoapify/geocoder-autocomplete - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

dist/autocomplete.d.ts

@@ -10,2 +10,3 @@ export declare class GeocoderAutocomplete {
     private currentPromiseReject;
+    private currentTimeout;
     private changeCallbacks;
@@ -12,0 +13,0 @@ private suggestionsChangeCallbacks;

dist/autocomplete.js

@@ -90,3 +90,9 @@ "use strict";
             });
+            this.currentPromiseReject = null;
         }
+        // Cancel previous timeout
+        if (this.currentTimeout) {
+            window.clearTimeout(this.currentTimeout);
+            this.currentTimeout = null;
+        }
         if (!currentValue) {
@@ -98,59 +104,61 @@ this.inputClearButton.classList.remove("visible");
         this.inputClearButton.classList.add("visible");
-        /* Create a new promise and send geocoding request */
-        const promise = new Promise((resolve, reject) => {
-            this.currentPromiseReject = reject;
-            let url = `${this.geocoderUrl}?text=${encodeURIComponent(currentValue)}&apiKey=${this.apiKey}`;
-            // Add type of the location if set. Learn more about possible parameters on https://apidocs.geoapify.com/docs/geocoding/api/api
-            if (this.options.type) {
-                url += `&type=${this.options.type}`;
-            }
-            if (this.options.limit) {
-                url += `&limit=${this.options.limit}`;
-            }
-            if (this.options.lang) {
-                url += `&lang=${this.options.lang}`;
-            }
-            if (this.options.countryCodes) {
-                url += `&countryCodes=${this.options.countryCodes.join(',')}`;
-            }
-            if (this.options.position) {
-                url += `&lat=${this.options.position.lat}&lon=${this.options.position.lon}`;
-            }
-            fetch(url)
-                .then((response) => {
-                if (response.ok) {
-                    response.json().then(data => resolve(data));
+        this.currentTimeout = window.setTimeout(() => {
+            /* Create a new promise and send geocoding request */
+            const promise = new Promise((resolve, reject) => {
+                this.currentPromiseReject = reject;
+                let url = `${this.geocoderUrl}?text=${encodeURIComponent(currentValue)}&apiKey=${this.apiKey}`;
+                // Add type of the location if set. Learn more about possible parameters on https://apidocs.geoapify.com/docs/geocoding/api/api
+                if (this.options.type) {
+                    url += `&type=${this.options.type}`;
                 }
-                else {
-                    response.json().then(data => reject(data));
+                if (this.options.limit) {
+                    url += `&limit=${this.options.limit}`;
                 }
+                if (this.options.lang) {
+                    url += `&lang=${this.options.lang}`;
+                }
+                if (this.options.countryCodes) {
+                    url += `&countryCodes=${this.options.countryCodes.join(',')}`;
+                }
+                if (this.options.position) {
+                    url += `&lat=${this.options.position.lat}&lon=${this.options.position.lon}`;
+                }
+                fetch(url)
+                    .then((response) => {
+                    if (response.ok) {
+                        response.json().then(data => resolve(data));
+                    }
+                    else {
+                        response.json().then(data => reject(data));
+                    }
+                });
             });
-        });
-        promise.then((data) => {
-            this.currentItems = data.features;
-            this.notifySuggestions(this.currentItems);
-            if (!this.currentItems.length) {
-                return;
-            }
-            /*create a DIV element that will contain the items (values):*/
-            this.autocompleteItemsElement = document.createElement("div");
-            this.autocompleteItemsElement.setAttribute("class", "geoapify-autocomplete-items");
-            /* Append the DIV element as a child of the autocomplete container:*/
-            this.container.appendChild(this.autocompleteItemsElement);
-            /* For each item in the results */
-            data.features.forEach((feature, index) => {
-                /* Create a DIV element for each element: */
-                const itemElement = document.createElement("div");
-                itemElement.innerHTML = this.getStyledAddress(feature.properties, currentValue);
-                itemElement.addEventListener("click", (e) => {
-                    event.stopPropagation();
-                    this.setValueAndNotify(this.currentItems[index]);
+            promise.then((data) => {
+                this.currentItems = data.features;
+                this.notifySuggestions(this.currentItems);
+                if (!this.currentItems.length) {
+                    return;
+                }
+                /*create a DIV element that will contain the items (values):*/
+                this.autocompleteItemsElement = document.createElement("div");
+                this.autocompleteItemsElement.setAttribute("class", "geoapify-autocomplete-items");
+                /* Append the DIV element as a child of the autocomplete container:*/
+                this.container.appendChild(this.autocompleteItemsElement);
+                /* For each item in the results */
+                data.features.forEach((feature, index) => {
+                    /* Create a DIV element for each element: */
+                    const itemElement = document.createElement("div");
+                    itemElement.innerHTML = this.getStyledAddress(feature.properties, currentValue);
+                    itemElement.addEventListener("click", (e) => {
+                        event.stopPropagation();
+                        this.setValueAndNotify(this.currentItems[index]);
+                    });
+                    this.autocompleteItemsElement.appendChild(itemElement);
                 });
-                this.autocompleteItemsElement.appendChild(itemElement);
+            }, (err) => {
+                if (!err.canceled) {
+                    console.log(err);
+                }
             });
-        }, (err) => {
-            if (!err.canceled) {
-                console.log(err);
-            }
-        });
+        }, 100);
     }
@@ -236,2 +244,14 @@ getStyledAddress(featureProperties, currentValue) {
         this.inputClearButton.classList.remove("visible");
+        // Cancel previous request
+        if (this.currentPromiseReject) {
+            this.currentPromiseReject({
+                canceled: true
+            });
+            this.currentPromiseReject = null;
+        }
+        // Cancel previous timeout
+        if (this.currentTimeout) {
+            window.clearTimeout(this.currentTimeout);
+            this.currentTimeout = null;
+        }
         this.closeDropDownList();
@@ -238,0 +258,0 @@ // notify here

package.json

 {
   "name": "@geoapify/geocoder-autocomplete",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Geocoder autocomplete field",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

29598

increased by3.29%

Lines of code

575

increased by3.79%

No dependency changes