76 lines
2.1 KiB
JavaScript
76 lines
2.1 KiB
JavaScript
let searchTimeout;
|
|
document.getElementById("searchInput").addEventListener("input", function (e) {
|
|
clearTimeout(searchTimeout);
|
|
const query = e.target.value.trim();
|
|
|
|
if (query.length < 2) {
|
|
document.getElementById("searchResults").innerHTML =
|
|
'<div class="empty-state"><p>Enter at least 2 characters to search</p></div>';
|
|
return;
|
|
}
|
|
|
|
searchTimeout = setTimeout(() => searchUsers(query), 300);
|
|
});
|
|
|
|
async function searchUsers(query) {
|
|
try {
|
|
const response = await fetch(
|
|
`/api/search-users?q=${encodeURIComponent(query)}`,
|
|
{
|
|
headers: {
|
|
Authorization: `Bearer ${currentToken}`,
|
|
},
|
|
},
|
|
);
|
|
|
|
if (response.ok) {
|
|
searchResults = await response.json();
|
|
renderSearchResults();
|
|
} else {
|
|
console.error("Search failed");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error searching users:", error);
|
|
}
|
|
}
|
|
|
|
function renderSearchResults() {
|
|
const searchResultsContainer = document.getElementById("searchResults");
|
|
searchResultsContainer.innerHTML = "";
|
|
|
|
if (searchResults.length === 0) {
|
|
searchResultsContainer.innerHTML =
|
|
'<div class="empty-state"><p>No users found</p></div>';
|
|
return;
|
|
}
|
|
|
|
searchResults.forEach((user) => {
|
|
const div = document.createElement("div");
|
|
div.className = "chat-item";
|
|
|
|
const avatarContent = user.avatar_url
|
|
? `<img src="${user.avatar_url}" alt="${user.username}">`
|
|
: user.username.charAt(0).toUpperCase();
|
|
|
|
div.innerHTML = `
|
|
<div class="chat-avatar">${avatarContent}</div>
|
|
<div class="chat-info">
|
|
<div class="chat-username">${user.username}</div>
|
|
<div class="chat-phone">${user.phone}</div>
|
|
<div class="chat-last-message">Click to start chatting</div>
|
|
</div>
|
|
`;
|
|
|
|
div.onclick = () => {
|
|
selectChat(user.username, user.phone, user.avatar_url);
|
|
showChatTab("existing");
|
|
document.getElementById("searchInput").value = "";
|
|
if (isMobile) {
|
|
hideChatsPanel();
|
|
}
|
|
};
|
|
|
|
searchResultsContainer.appendChild(div);
|
|
});
|
|
}
|