auto-complete

IABTechLab · Sep 12, 2024 · 54e52cb · 54e52cb
1 parent c483c31
commit 54e52cb
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/webroot/adm/oncall/participant-summary.html b/webroot/adm/oncall/participant-summary.html
@@ -4,6 +4,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link href="../../css/participantSummary.css" rel="stylesheet" />
+    <link rel="shortcut icon" href="#">
 </head>
 
 <body>
@@ -26,7 +27,7 @@ <h5>Search</h5>
                     <div class="search-container align-items-end">
                         <div class="col">
                             <div class="form-group">
-                                <label for="key">Site Id or Name:</label>
+                                <label for="site-search">Site Id or Name:</label>
                                 <input type="text" class="form-control" id="site-search">
                                 <pre class="errorDiv" id="siteSearchErrorOutput"></pre>
                             </div>

diff --git a/webroot/js/participantSummary.js b/webroot/js/participantSummary.js
@@ -1,7 +1,15 @@
 let siteList;
+let resultsElement = document.querySelector('.search-autocomplete-results');
 const searchInput = document.querySelector('#site-search');
 searchInput.addEventListener('keyup', searchSitesAutocomplete);
 
+window.addEventListener('mouseup',function(event){
+    var dropdown = document.querySelector('.dropdown-menu');
+    if(event.target != dropdown && event.target.parentNode != dropdown){
+        $(dropdown).hide();
+    }
+});  
+
 /* ***** multi-use error handler *** */
 function participantSummaryErrorHandler(err, divContainer) {
     const errorMessage = prettifyJson(err.responseText);
@@ -12,8 +20,14 @@ function loadAllSitesCallback(result) {
     siteList = JSON.parse(result).map((item) => { return { name: item.name, id: item.id, clientTypes: item.clientTypes } });
 };
 
+function setSearchValue(searchText) {
+    document.querySelector('#site-search').value = searchText;
+    $(resultsElement).hide();
+    $('#doSearch').click();
+}
+
 function searchSitesAutocomplete(e) {
-    const resultsElement = document.querySelector('.search-autocomplete-results');
+
     searchString = searchInput.value;
     const options = {
         threshold: .2,
@@ -22,7 +36,7 @@ function searchSitesAutocomplete(e) {
     };
     const fuse = new Fuse(siteList, options);
     const result = fuse.search(searchString).map((site) => {
-        return `<a class="dropdown-item" href="#">${site.item.name} (${site.item.id})</a>`;
+        return `<a class="dropdown-item" href="#" onclick="setSearchValue('${site.item.name}')">${site.item.name} (${site.item.id})</a>`;
     }) ;
 
     let resultHtml = '';
@@ -32,9 +46,9 @@ function searchSitesAutocomplete(e) {
     resultsElement.innerHTML = resultHtml;
     if (result.length > 0) { 
         $(resultsElement).show();
+    } else {
+        $(resultsElement).hide();
     }
-
-    console.log(result);
 }
 
 function rotateKeysetsCallback(result, keyset_id) {
@@ -169,7 +183,7 @@ $(document).ready(() => {
 
     $('#doSearch').on('click', () => {
         $('#siteSearchErrorOutput').hide();
-        const siteSearch = $('#key').val();
+        const siteSearch = $('#site-search').val();
         let site = null;
         if (Number.isInteger(Number(siteSearch))) {
             const foundSite = siteList.find((item) => { return item.id === Number(siteSearch) });