feat: 1st functional vanilla version

steve-lebleu · Feb 24, 2024 · 4c8790e · 4c8790e
1 parent 37718d1
commit 4c8790e
Show file tree

Hide file tree

Showing 4 changed files with 220 additions and 109 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "description": "jQuery auto-complete plugin",
   "main": "src/js/index.js",
   "scripts": {
-    "build": "mkdir -p dist && cp -r src/index.html src/files/ dist/ & npm run js & npm run css & exit",
+    "build": "mkdir -p dist && cp -r src/index.html src/files/ dist/ & npm run css & npm run js",
     "css": "node-sass ./src/sass/kompleter.scss ./dist/css/kompleter.min.css --output-style compressed",
     "js": "webpack",
     "cypress:open": "cypress open",

diff --git a/src/index.html b/src/index.html
@@ -18,8 +18,9 @@
     <!--[if lt IE 9]>
     <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
     <![endif]-->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script src="./js/jquery.kompleter.min.js"></script>
+    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
+
+    <script src="./js/kompleter.min.js"></script>
 
 </head>
 
@@ -40,8 +41,24 @@
   </div>
 
   <script type="text/javascript">
-    $(document).ready(function() {
-      $('#auto-complete').kompleter({});
+    <!-- TODO Keep data- attributes, and let ability to choose that or options object. If data-, support all attributes -->
+    function ready(fn) {
+      if (document.readyState !== 'loading') {
+        fn();
+        return;
+      }
+      document.addEventListener('DOMContentLoaded', fn);
+    };
+    ready(() => {
+      kompleter.init({
+        dataSource: 'files/kompleter.json',
+        filterOn: 'Name',
+        fieldsToDisplay: [
+          'Name',
+          'CountryCode',
+          'Population'
+        ]
+      });
     });
   </script>