diff --git a/items/index.html b/items/index.html
index 236d698..50cd1dd 100644
--- a/items/index.html
+++ b/items/index.html
@@ -47,7 +47,7 @@
                         </div>
                         <div class = "col-lg-3 col-sm-12">
                             <div class = "col fw-bold">Category:</div>
-                            <input class="col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="category-items" id="category-choice" name="category-choice" placeholder="ALL"/>
+                            <input class="col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="category-choice" name="category-choice" placeholder="ALL"/>
                             <datalist id="category-items">
                                 <option value="ALL">
                                 <option value="armor">
@@ -70,7 +70,7 @@
                         </div>
                         <div class = "col-lg-3 col-sm-12">
                             <div class = "col fw-bold">Rarity:</div>
-                            <input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="rarity-items" id="rarity-choice" name="rarity-choice" placeholder="ANY"/>
+                            <input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="rarity-choice" name="rarity-choice" placeholder="ANY"/>
                             <datalist id = "rarity-items">
                                 <option value="ANY">
                                 <option value="Normal">
@@ -93,22 +93,22 @@
                     <div class = "row">
                         <div class = "col-lg-3 col-sm-12">
                             <div class = "col fw-bold">Filter 1:</div>
-                            <input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="filter-items" id="filter1-choice" name="filter1-choice" placeholder="ANY"/>
+                            <input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="filter1-choice" name="filter1-choice" placeholder="ANY"/>
                             <p class="error col-auto"></p>
                         </div>
                         <div class = "col-lg-3 col-sm-12">
                             <div class = "col fw-bold">Filter 2:</div>
-                            <input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="filter-items" id="filter2-choice" name="filter2-choice" placeholder="ANY"/>
+                            <input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="filter2-choice" name="filter2-choice" placeholder="ANY"/>
                             <p class="error col-auto"></p>
                         </div>
                         <div class = "col-lg-3 col-sm-12">
                             <div class = "col fw-bold">Filter 3:</div>
-                            <input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="filter-items" id="filter3-choice" name="filter3-choice" placeholder="ANY"/>
+                            <input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="filter3-choice" name="filter3-choice" placeholder="ANY"/>
                             <p class="error col-auto"></p>
                         </div>
                         <div class = "col-lg-3 col-sm-12">
                             <div class = "col fw-bold">Filter 4:</div>
-                            <input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" list="filter-items" id="filter4-choice" name="filter4-choice" placeholder="ANY"/>
+                            <input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="filter4-choice" name="filter4-choice" placeholder="ANY"/>
                             <p class="error col-auto"></p>
                         </div>
                         <datalist id = "filter-items"></datalist>
@@ -133,6 +133,7 @@
                 </div>
             </div>
         </div>
+        <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.min.js"></script>
         <script type="text/javascript" src="../js/utils.js"></script>
         <script type="text/javascript" src="../js/build_utils.js"></script>
         <script type="text/javascript" src="../js/icons.js"></script>
diff --git a/js/sq2items.js b/js/sq2items.js
index 5699044..76d6695 100644
--- a/js/sq2items.js
+++ b/js/sq2items.js
@@ -1,4 +1,54 @@
+document.addEventListener("DOMContentLoaded", function() {
+    let filterInputs = new Map([["category", ["ALL", "armor", "helmet", "chestplate", "leggings", "boots", "accessory", "ring", "bracelet", "weapon", "wand", "spear", "bow", "dagger", "relik"]],
+                                ["rarity", ["ANY", "Normal", "Unique", "Set", "Rare", "Legendary", "Fabled", "Mythic", "Sane"]],
+                                ["filter1", sq2ItemFilters],
+                                ["filter2", sq2ItemFilters],
+                                ["filter3", sq2ItemFilters],
+                                ["filter4", sq2ItemFilters]]);
+    for (const [field, data] of filterInputs) {
+        filterInputs.set(field, new autoComplete({
+            data: {
+                src: data,
+            },
+            threshold: 0,
+            selector: "#"+ field +"-choice",
+            wrapper: false,
+            resultsList: {
+                maxResults: 100,
+                tabSelect: true,
+                noResults: true,
+                class: "search-box dark-7 rounded-bottom px-2 fw-bold dark-shadow-sm",
+                element: (list, data) => {
+                    let position = document.getElementById(field+'-choice').getBoundingClientRect();
+                    list.style.top = position.bottom + window.scrollY +"px";
+                    list.style.left = position.x+"px";
+                    list.style.width = position.width+"px";
+                    list.style.maxHeight = position.height * 4 +"px";
 
+                    if (!data.results.length) {
+                        message = document.createElement('li');
+                        message.classList.add('scaled-font');
+                        message.textContent = "No results found!";
+                        list.prepend(message);
+                    };
+                },
+            },
+            resultItem: {
+                class: "scaled-font search-item",
+                selected: "dark-5",
+            },
+            events: {
+                input: {
+                    selection: (event) => {
+                        if (event.detail.selection.value) {
+                            event.target.value = event.detail.selection.value;
+                        };
+                    },
+                },
+            }
+        }));
+    };
+});
 
 const sq2_translate_mappings = {
     //"Name": "name",