chore: 1st refactoring and options management

steve-lebleu · Mar 9, 2024 · 0bd51c5 · 0bd51c5
1 parent b4dee8c
commit 0bd51c5
Show file tree

Hide file tree

Showing 6 changed files with 304 additions and 437 deletions.
diff --git a/README.md b/README.md
@@ -70,4 +70,26 @@ Following options are available:
 * **beforeFocus**: function(e, element), function, callback fired before focus on result item
 * **afterFocus**: function(e, element), callback fired after focus on result item
 * **beforeComplete**: function(e, dataset, element), callback fired before insertion of result
-* **afterComplete**: function(e, dataset, element), callback fired after insertion of result
+* **afterComplete**: function(e, dataset, element), callback fired after insertion of result
+
+### Analyze and refactoring to Vanilla version 
+
+Two ways of usage: static, dynamic local, dynamic api
+
+#### Static
+
+Consumer give the full dataset when kompltr is initialized
+
+-> No lazy loading
+-> async onKeyup callback optional
+-> Cache available
+-> Filtering is made at kompletr side
+
+#### Dynamic
+
+Consumer give nothing when kompltr is initialized
+
+-> Lazy loading
+-> async onKeyup callback required
+-> Cache available
+-> Filtering is made at client side
diff --git a/src/index.html b/src/index.html
@@ -48,10 +48,7 @@ <h1>Kømpletr</h1>
       class="input--search"
       autocomplete="off"
       placeholder="Enter a city name ..."
-      value=""
-      data-url="files/kompleter.json"
-      data-filter-on="Name"
-      data-fields="Name,CountryCode,Population" />
+      value="" />
   </div>
 
   <footer>
@@ -71,158 +68,58 @@ <h1>Kømpletr</h1>
     };
     ready(() => {
       const input = document.getElementById('auto-complete');
-      console.log(input);
-
-      const dataSource = {
-        url: 'http://localhost:3000/api',
-        queryString: {  
-          keys: {
-            term: 'q',
-            limit: 'limit',
-            offset: 'offset',
-            perPage: 'perPage',
-          },
-          values: {
-            limit: 100,
-            offset: 0,
-            perPage: 10,
-          }
-        },
-        cache: 5000,
-      };
 
       const options = {
-        animation: {
-          type: 'fadeIn',
-          duration: 500
+        input: null, // Optional
+        data: [],
+        options: {
+          animation: {
+            type: 'fadeIn',
+            duration: 500
+          },
+          theme: 'dark',  
+          multiple: false,
+          fieldsToDisplay: [
+            'Name',
+            'CountryCode',
+            'Population'
+          ],
+          maxResults: 5,
+          propToMapAsValue: 'Name',
+          startQueriyngFromChar: 2,
+          filterOn: 'prefix',
+          cache: 5000
         },
-
-        fieldsToDisplay: [
-          'Name',
-          'CountryCode',
-          'Population'
-        ],
-        maxResults: 5,
-        propToMapAsValue: 'Name'
-      };
-
-      let data = { data: [
-            {
-                "0": "Breda",
-                "1": "NLD",
-                "2": "160398",
-                "Name": "Breda",
-                "CountryCode": "NLD",
-                "Population": "160398"
-            },
-            {
-                "0": "Tres de Febrero",
-                "1": "ARG",
-                "2": "352311",
-                "Name": "Tres de Febrero",
-                "CountryCode": "ARG",
-                "Population": "352311"
-            },
-            {
-                "0": "LÂ´Hospitalet de Llobregat",
-                "1": "ESP",
-                "2": "247986",
-                "Name": "LÂ´Hospitalet de Llobregat",
-                "CountryCode": "ESP",
-                "Population": "247986"
-            },
-            {
-                "0": "Libreville",
-                "1": "GAB",
-                "2": "419000",
-                "Name": "Libreville",
-                "CountryCode": "GAB",
-                "Population": "419000"
-            },
-            {
-                "0": "Brescia",
-                "1": "ITA",
-                "2": "191317",
-                "Name": "Brescia",
-                "CountryCode": "ITA",
-                "Population": "191317"
-            },
-            {
-                "0": "Cape Breton",
-                "1": "CAN",
-                "2": "114733",
-                "Name": "Cape Breton",
-                "CountryCode": "CAN",
-                "Population": "114733"
-            },
-            {
-                "0": "Brest",
-                "1": "FRA",
-                "2": "149634",
-                "Name": "Brest",
-                "CountryCode": "FRA",
-                "Population": "149634"
-            },
-            {
-                "0": "Bremen",
-                "1": "DEU",
-                "2": "540330",
-                "Name": "Bremen",
-                "CountryCode": "DEU",
-                "Population": "540330"
-            },
-            {
-                "0": "Freiburg im Breisgau",
-                "1": "DEU",
-                "2": "202455",
-                "Name": "Freiburg im Breisgau",
-                "CountryCode": "DEU",
-                "Population": "202455"
-            },
-            {
-                "0": "Bremerhaven",
-                "1": "DEU",
-                "2": "122735",
-                "Name": "Bremerhaven",
-                "CountryCode": "DEU",
-                "Population": "122735"
-            },
-            {
-                "0": "Debrecen",
-                "1": "HUN",
-                "2": "203648",
-                "Name": "Debrecen",
-                "CountryCode": "HUN",
-                "Population": "203648"
-            },
-            {
-                "0": "Brest",
-                "1": "BLR",
-                "2": "286000",
-                "Name": "Brest",
-                "CountryCode": "BLR",
-                "Population": "286000"
-            }
-        ]
-      };
-
-      const cbs = {
-        onKeyup: (value, cb) => {
+        /**onKeyup: async function (value, cb) {
           console.log('cb.onKeyup ', value);
           console.log('I\'m doing scrappy stuffs with the data!');
-          console.log('You want the data? There is!', data.data);
-          cb(data.data);
-        },
+          data = ['string', 'string', 'string'];
+          //cb(data.data);
+        },**/
         onSelect: (value) => {
           console.log('cb.onSelect', value);
         },
         onError: (value) => {
           console.log('cb.onError ', value);
-        }
+        },
       };
 
       // Way 1
-      input.kompleter(options, data.data, cbs)
+
+      const headers = new Headers();
+        headers.append('content-type', 'application/x-www-form-urlencoded');
+        headers.append('method', 'GET');
+
+        fetch(`http://localhost:3000/api`, headers)
+          .then(result => result.json())
+          .then(data => {
+            console.log('there is', data)
+            options.data = data;
+            input.kompleter(options);
+          })
+          .catch(e => {
+            console.log(e);
+          });
 
       // Way 2.1
       // kompleter(input, d, cbs, options);