65 lines
2.2 KiB
JavaScript
65 lines
2.2 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
const shareUsernameInput = document.getElementById("share-username");
|
|
const suggestionsBox = document.getElementById("user-suggestions");
|
|
const shareSubmitButton = document.getElementById("share-submit");
|
|
|
|
if (!shareUsernameInput || !suggestionsBox || !shareSubmitButton) {
|
|
console.warn("Autocomplete: Required elements not found.");
|
|
return;
|
|
}
|
|
|
|
// Función para buscar usuarios
|
|
async function fetchUsers(query) {
|
|
try {
|
|
const response = await fetch(`/api/users/search?q=${encodeURIComponent(query)}`);
|
|
if (!response.ok) throw new Error("API error");
|
|
return await response.json();
|
|
} catch (error) {
|
|
console.error("Error fetching users:", error);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
// Mostrar sugerencias en el dropdown
|
|
function showSuggestions(users) {
|
|
suggestionsBox.innerHTML = "";
|
|
if (users.length === 0) {
|
|
suggestionsBox.classList.add("d-none");
|
|
return;
|
|
}
|
|
|
|
users.forEach((user) => {
|
|
const item = document.createElement("button");
|
|
item.type = "button";
|
|
item.classList.add("list-group-item", "list-group-item-action");
|
|
item.textContent = user.username;
|
|
item.addEventListener("click", () => {
|
|
shareUsernameInput.value = user.username;
|
|
suggestionsBox.classList.add("d-none");
|
|
});
|
|
suggestionsBox.appendChild(item);
|
|
});
|
|
|
|
suggestionsBox.classList.remove("d-none");
|
|
}
|
|
|
|
// Evento de entrada para mostrar sugerencias dinámicamente
|
|
shareUsernameInput.addEventListener("input", async function () {
|
|
const query = this.value.trim();
|
|
if (query.length >= 2) {
|
|
const users = await fetchUsers(query);
|
|
showSuggestions(users);
|
|
} else {
|
|
suggestionsBox.classList.add("d-none");
|
|
}
|
|
});
|
|
|
|
// Ocultar sugerencias si se hace clic fuera
|
|
document.addEventListener("click", function (event) {
|
|
if (!shareUsernameInput.contains(event.target) && !suggestionsBox.contains(event.target)) {
|
|
suggestionsBox.classList.add("d-none");
|
|
}
|
|
});
|
|
});
|
|
|