Help with autocomplete - Wikipedia Viewer

1

Hello. I’m doing the project in clean Javascript. But I can’t find how to add autocomplete to it. I googled but it seems everybody does the project in jQuery, so I can’t find the right code for me. Can anybody help me?

const getRandomLinks = () => {
	const value = input.value;
	fetch('https://en.wikipedia.org/w/api.php?format=json&action=opensearch&namespace=0&limit=10&prop=extracts&exintro&explaintext&exsentences=1&exlimit=10&search=' + value + '&origin=*', {method: 'GET'}).then(response => response.json()).then(data => {
			result.innerHTML = '';
			console.log(data);
			const title = data[1];
			const content = data[2];
			const link = data[3];
			for(let i = 0; i < data[3].length; i++) {
				const li = document.createElement('li');
				const text = li.textContent;
				const a = document.createElement('a');
				a.href = `https://en.wikipedia.org/wiki/${title[i]}`;
				a.setAttribute('target', '_blank');
				a.textContent = text;
				a.innerHTML = `<strong>${title[i]}</strong><br><br>${content[i]}`;
				li.appendChild(a);
				result.appendChild(li);
			}
	}).catch(error => {
			if(errorMsg.style.display === 'none') {
				errorMsg.style.display === 'block';
			} else {
				errorMsg.style.display === 'none';
			}
		});
}
2

Coding your own autocomplete is a tall order, which is why everyone uses jQuery or some other library. You’ll have to do a few things:

  1. Get the user input as it’s being typed (bind a listener to the keyup event)
  2. Make the required network call on the input
  3. Format the results and output them as a dropdown box
  4. Make sure each result is clickable and will properly fill in the selected text, then perform a search

I always find (3) to be really difficult, but I kinda suck at positioning elements. The real challenge is in fixing the small details. For instance, you don’t want to send a network request every time the user types something because you could end up sending a lot of unnecessary data. So, you’d need to debounce the input so it only searches after 250ms of inactivity, or something like that. You also don’t want to send requests for inputs that are too small (who really needs to autocomplete “dog”, anyways?), so you’ll want to filter out any input that is smaller than some threshold - 3 letters is a typical cut off, from what I’ve seen. Keep in mind that you can tailor your Wikimedia query to only receive the titles of articles which would make for a much more efficient request.

3

Thank you for your answer. I’ll try to make it work when I start understanding JS a little bit better.