Add autocomplete.

TODO: Currently, searches that are not in OOC mode, have an empty autocomplete. Not the best solution. FIX!

Author: Simyon264

Client/Components/SearchBar.razor

@@ -1,13 +1,24 @@
 @using Humanizer
+@using Microsoft.Extensions.Configuration
+@inject IConfiguration Configuration
+
 @{
     var searchModes = Enum.GetValues(typeof(Shared.SearchMode)).Cast<Shared.SearchMode>().ToList();
     <div class="search-bar">
         <div class="d-flex ms-auto">
-            <input type="text" class="form-control" placeholder="Search for a replay..." onsubmit="search()" aria-label="Search">
+            <input 
+                type="text" 
+                class="form-control" 
+                placeholder="Search for a replay..." 
+                onsubmit="search()" 
+                aria-label="Search"
+                data-filter="@Configuration["ApiUrl"]api/Data/username-completion?username=#QUERY#"
+                id="search"
+                >
             <button class="btn-secondary btn dropdown-toggle" type="button" id="searchModeButton" style="margin-left: 1rem; margin-right: 1rem;" data-bs-toggle="dropdown" aria-expanded="false">
                 @Shared.SearchMode.PlayerOocName.Humanize()
             </button>
-            <ul class="dropdown-menu">
+            <ul class="dropdown-menu no-affect">
                 @foreach (var mode in searchModes)
                 {
                     <li><a class="dropdown-item">@mode.Humanize()</a></li>
@@ -18,6 +29,20 @@
     </div>
 }
 
+<style>
+    /* this is a bit stupid
+        so. the autocomplete plugin uses a div dropdown right? but that dropdown is placed directly ON the input, 
+        we want to move it down, but dont want to move the no-affect dropdown, so we move EVERY dropdown down, but not the no-affect one
+     */
+    .dropdown-menu {
+        margin-top: 2.5rem;
+    }
+    
+    .no-affect {
+        margin-top: 0;
+    }
+</style>
+
 <script>
     // This is a script to make the dropdown change the text of the button
     const dropdowns = document.querySelectorAll('.dropdown-menu a');
@@ -50,4 +75,16 @@
     
     // Set the value of the search input to the value of the query
     document.querySelector('.search-bar input').value = new URLSearchParams(window.location.search).get('query');
+    
+    document.addEventListener('DOMContentLoaded', e => {
+        $('#search').autocomplete({
+            onItemRendered(el, item) {
+                const currentSelectedSearchMode = document.getElementById('searchModeButton').textContent;
+                if (currentSelectedSearchMode !== "@Shared.SearchMode.PlayerOocName.Humanize()") {
+                    // Currently, autocomplete only supports searching for player names. So delete the item
+                    item.remove();
+                }   
+            }
+        })
+    }, false);
 </script>