rafaelcaricio/moviewyrm
1
0
Fork 0
forked from mirrors/bookwyrm
Code Issues 4 Pull requests Projects Releases Wiki Activity

Uses datalist for autocomplete suggestions

Browse source
This commit is contained in:
Mouse Reeve 2022-01-10 15:47:40 -08:00
parent 380087da90
commit 2746318152
3 changed files with 4 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
bookwyrm/static/css/bookwyrm.css
View file

@ -606,13 +606,6 @@ details[open].details-panel summary .details-close {
right: 1em;
}
/** Autocomplete suggestions
******************************************************************************/
.autocomplete-suggestions {
position: fixed;
z-index: 1;
}
/** Tooltips
******************************************************************************/

12
bookwyrm/static/js/autocomplete.js
View file

@ -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);

3
bookwyrm/templates/book/file_link_modal.html
View file

@ -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>