diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css
index 72d39a7ec..92ddd294d 100644
--- a/bookwyrm/static/css/bookwyrm.css
+++ b/bookwyrm/static/css/bookwyrm.css
@@ -606,13 +606,6 @@ details[open].details-panel summary .details-close {
     right: 1em;
 }
 
-/** Autocomplete suggestions
- ******************************************************************************/
-.autocomplete-suggestions {
-    position: fixed;
-    z-index: 1;
-}
-
 /** Tooltips
  ******************************************************************************/
 
diff --git a/bookwyrm/static/js/autocomplete.js b/bookwyrm/static/js/autocomplete.js
index f75948078..df5c890f7 100644
--- a/bookwyrm/static/js/autocomplete.js
+++ b/bookwyrm/static/js/autocomplete.js
@@ -21,25 +21,17 @@
         // Get suggestions
         let suggestions = getSuggestions(input.value, mimetypeTrie);
 
-        const boxId = input.id + "_suggestions";
+        const boxId = input.getAttribute("list");
 
         // Create suggestion box, if needed
         let suggestionsBox = document.getElementById(boxId);
 
-        if (!suggestionsBox) {
-            suggestionsBox = document.createElement("ul");
-            suggestionsBox.id = boxId;
-            suggestionsBox.classList.add("autocomplete-suggestions", "box");
-
-            input.insertAdjacentElement("afterend", suggestionsBox);
-        }
-
         // Clear existing suggestions
         suggestionsBox.innerHTML = "";
 
         // Populate suggestions box
         suggestions.forEach(suggestion => {
-            const suggestionItem = document.createElement("li");
+            const suggestionItem = document.createElement("option");
 
             suggestionItem.textContent = suggestion;
             suggestionsBox.appendChild(suggestionItem);
diff --git a/bookwyrm/templates/book/file_link_modal.html b/bookwyrm/templates/book/file_link_modal.html
index 87d358174..48921bb89 100644
--- a/bookwyrm/templates/book/file_link_modal.html
+++ b/bookwyrm/templates/book/file_link_modal.html
@@ -27,7 +27,8 @@
     </div>
     <div class="column is-one-fifth">
         <label class="label" for="id_filetype">{% trans "File type:" %}</label>
-        <input type="text" name="filetype" maxlength="5" class="input" required="" id="id_filetype" value="{% firstof file_link_form.filetype.value "" %}" placeholder="PDF" data-autocomplete="mimetype">
+        <input type="text" name="filetype" maxlength="5" class="input" required="" id="id_filetype" value="{% firstof file_link_form.filetype.value "" %}" placeholder="PDF" list="mimetypes-list" data-autocomplete="mimetype">
+        <datalist id="mimetypes-list"></datalist>
         {% include 'snippets/form_errors.html' with errors_list=file_link_form.filetype.errors id="desc_filetype" %}
     </div>
 </div>