@speedcubing/cookie/public/js/search.js

Speedcubing Online's UI design.

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
	if (this.readyState == xhr.DONE) {
		/*
		console.log('request finished!');*/
		const res = JSON.parse(this.responseText);

		const loader = document.getElementById('search-loader');
		loader.style.display = 'none';

		console.log(res);
		if (res.error == 0) {
			let searchResults = document.getElementById('search-results');

			let elem = showUser(res);
			searchResults.appendChild(elem);
		}
	}
}

function showUser(user) {
	/*
	<div class="users-item">
							<div class="users-item-picture-wrapper">
								<a href="#">
									<img class="users-item-picture" width="40px" height="40px" src="https://yt3.ggpht.com/ytc/AAUvwngsISEfx1iEEO1ChW3f9drZ_rBTxz1VM-f746t7Qg=s900-c-k-c0x00ffffff-no-rj">
								</a>
							</div>
							<div class="users-item-name-wrapper">
								<a class="users-item-name" href="#">
									trimorph
								</a>
							</div>
						</div>
	*/
	
	let profileLink = '/profile/@' + user.username;

	let wrapper = document.createElement('div')
	wrapper.classList.add('users-item');

	let imgDiv = document.createElement('div')
	imgDiv.classList.add('users-item-picture-wrapper');

	let imageLink = document.createElement('a');
	imageLink.href = '#';

	let image = document.createElement('img');
	image.src = user.profileImageUrl;
	image.classList.add('users-item-picture');

	imageLink.appendChild(image);
	imgDiv.appendChild(imageLink);

	let div = document.createElement('div')
	div.classList.add('users-item-name-wrapper');

	let linkElem = document.createElement('a');
	linkElem.classList.add('users-item-name', 'bold');
	linkElem.href = profileLink;
	linkElem.innerHTML = user.displayname;

	let linkElem2 = document.createElement('a');
	linkElem2.classList.add('users-item-name', 'text-muted');
	linkElem2.href = profileLink;
	linkElem2.innerHTML = '@' + user.username;

	div.appendChild(linkElem);
	div.appendChild(linkElem2);

	wrapper.appendChild(imgDiv);
	wrapper.appendChild(div);
	return wrapper;
}

function search() {
	const searchBar = document.getElementById('search-bar');
	const query = searchBar.value;

	const loaderWrapper = document.getElementById('search-loader');
	loaderWrapper.style.display = 'block';

	const searchResults = document.getElementById('search-results');
	searchResults.innerHTML = '';

	xhr.abort();
	xhr.open('GET', 'http://localhost:5000/api/get_user_by_username/' + query);
	xhr.send();
}