add feature search name and middleware changes to fix the resit for khazanah

public/css/main.css

@@ -44,3 +44,53 @@ span#basic-hargaemas {
     height: 38px;
     border-radius: 0;
 }
+
+/* Twitter Typeahead CSS plugin */
+
+.twitter-typeahead { width: 70%; } 
+
+.tt-query {
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  }
+  
+  .tt-hint {
+    color: #999
+  }
+  
+  .tt-menu {    /* used to be tt-dropdown-menu in older versions */
+    /* width: 422px; */
+    width: 100%;
+    margin-top: 4px;
+    padding: 4px 0;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    -webkit-border-radius: 4px;
+       -moz-border-radius: 4px;
+            border-radius: 4px;
+    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+       -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+            box-shadow: 0 5px 10px rgba(0,0,0,.2);
+  }
+  
+  .tt-suggestion {
+    padding: 3px 20px;
+    line-height: 24px;
+  }
+  
+  .tt-suggestion.tt-cursor,.tt-suggestion:hover {
+    color: #fff;
+    background-color: #0097cf;
+  
+  }
+  
+  .tt-suggestion p {
+    margin: 0;
+  }
+
+  .empty-message {
+    padding: 5px 10px;
+   text-align: center;
+  }

public/js/searchName.js

@@ -0,0 +1,96 @@
+const keysearch = document.querySelector("#noic");
+let roles = document.getElementById("roles_avatar").value;
+
+$('#customerIDType').on('change', function() {
+    switch(this.value){
+        case 'nokp':
+            disableTypeahead();
+            resetInput();
+            keysearch.setAttribute("placeholder", "No Kad Pengenalan Pelanggan");
+            break;
+        case 'passport':
+            disableTypeahead();
+            resetInput();
+            keysearch.setAttribute("placeholder", "No Passport Pelanggan");
+            break;
+        case 'name':
+            enableTypeahead();
+            resetName();
+            keysearch.setAttribute("placeholder", "Nama Pelanggan");
+            break;
+    }
+});
+    
+var bloodhound = new Bloodhound({
+    datumTokenizer: Bloodhound.tokenizers.whitespace,
+    queryTokenizer: Bloodhound.tokenizers.whitespace,
+    remote: {
+        url: 'http://localhost:8000/admin/searchByName?nama=%QUERY',
+        wildcard:'%QUERY',
+        transform: function(response) {
+            return response.map(function(item) {
+                return { name: item.nama,noic:item.kpbaru ? item.kpbaru : item.kplama  };
+            });
+        }
+    },
+});
+
+function disableTypeahead() {
+    if (typeof typeahead !== 'undefined') {
+        typeahead.typeahead('destroy');
+    }
+}
+
+function enableTypeahead() {
+    // Re-initialize Typeahead with the same configuration
+    typeahead = $('.typeahead').typeahead({
+        hint: false,
+        highlight: true,
+        minLength: 3
+    },
+    {
+        name: 'suggestions',
+        source: bloodhound,
+        display: 'name',
+        templates: {
+            empty: function(data) {
+                return `<div class="empty-message">Carian <b>${data.query}</b> tidak jumpa dalam pangkalan data</div>`;
+            },
+            suggestion: function(data) {
+                return `<div style="cursor:pointer;" onclick="redirectName('${data.noic}')">` + data.name + '<br> ' + data.noic + '</div>';
+            }
+        }
+    });
+}
+
+function triggerEnter(){
+    console.log('test');
+}
+
+
+function redirectName(nokp){
+    Swal.fire({
+        title: 'Memuatkan...',
+        allowEscapeKey : false,
+        allowOutsideClick: false,
+        didOpen: function () {
+            Swal.showLoading()
+        }
+    });
+
+    if(roles == 'teller'){
+        window.location.replace(`/customer/search?noic=${nokp}&&customerIDType='name'`);        
+    }else{
+        window.location.replace(`/khazanah/searchpelanggan?noic=${nokp}&&customerIDType='name'`);        
+    }
+}
+
+function resetInput() {
+    $("#button-addon2").prop("disabled",false);
+    $('#noic').val('');
+}
+
+function resetName(){
+    $("#button-addon2").prop("disabled",true);
+    $('#noic').val('');
+}