initial commit

project/assets/controllers/customers_controller.js

@@ -0,0 +1,40 @@
+import { Controller } from '@hotwired/stimulus';
+import $ from 'jquery';
+/*
+ * This is an example Stimulus controller!
+ *
+ * Any element with a data-controller="hello" attribute will cause
+ * this controller to be executed. The name "hello" comes from the filename:
+ * hello_controller.js -> "hello"
+ *
+ * Delete this file or adapt it for your use!
+ */
+const _NEED_LENGTH_TO_SEARCH_CLIENT = 3;
+export default class extends Controller {
+    searchInput;
+    tableAll;
+    connect() {
+        this.searchInput = $('#customerListSearch');
+        this.tableAll = $('#customerListTable');
+        this.initSearch();
+    }
+    initSearch() {
+        const masterThs = this;
+        this.searchInput.on('keyup', e => {
+            const value = masterThs.searchInput.val().toLowerCase();
+            if (value.length < _NEED_LENGTH_TO_SEARCH_CLIENT) {
+                masterThs.searchInput.addClass("is-invalid");
+                masterThs.tableAll.find('tr').show();
+                if (value.length === 0) {
+                    masterThs.searchInput.removeClass("is-invalid");
+                }
+                return false;
+            }
+            masterThs.searchInput.removeClass("is-invalid");
+            masterThs.tableAll.find('tr').filter((e,tmp) => {
+                const t = $(tmp)
+                t.toggle(t.html().toLowerCase().indexOf(value) > -1);
+            });
+        })
+    }
+}