Defined in search.js

To add search funtionality, this script exports a function called addSearch. This function adds a keydown event listener to the input element with id #search_input.

// adds an event listener to the search input.
async function addSearch(g, projection, settings, endpoint) {
	const searchInput = d3.select('#search_input');
	searchInput.on('keydown', () => {
		onSearch(g, projection, settings, endpoint);
	});
}

When a user selects the input field and presses a key, the function onSearch() is called.

// Updates the shown data points when a new keyword is entered.
function onSearch(g, projection, settings) {
	if (d3.event.keyCode === 13) {
		const keyWord = d3.select('#search_input').property('value');
		updateDataPoints(
			settings.init.endpoint,
			getQueryFor(keyWord),
			g,
			projection,
			settings
		);
	}
}

That function then checks if the key that is pressed is the enter key with code 13. If that's the case, the keyword is obtained from the search input field and stored in the variable keyword. Lastly, the function updateDataPoints() is called using the helper function getQueryFor() from utilities.js to get a query with the filled in keyword.

To get the function that renders the data points working on new searches, I had to rewrite that one since it worked with rendering new data points, but not when datapoints would need to be updated. The next page on datapoints will explain how I fixed that.