Search in page with Vue.js

Vue.js is an outstanding library we can use to build complex frontend UI and/or apps, but it can also be used to implement small features even if we're working with a legacy/old project.

Imaging a page (eg. built from a CMS) with a list of documents and we want to give the user the power of a search feature.

In Vue.js we should think, first of all, about data, so:

1. Init the state (data) on mounted hook (populate the "documents" variable inxpecting and traversing the DOM
2. Create a computed value that will drive UI refresh (the "searchResults" variable)
3. Add a couple of methods to improve the accessibility (handleClickOnBody and handleKeyUp)

This is the final JavaScript code:

var searchApp = new Vue({
	el: "#searchapp",

	data: {
		documents: [],
		searchString: "",
		searchResultsVisible: true
	},

	mounted: function () {
		docsEls = document.querySelectorAll(".list__item");
		for (const item of Array.from(docsEls)) {
			this.documents.push({
				text: item.querySelector(".list__item__description").innerHTML
			});
		}

		document.documentElement.addEventListener("click", this.handleClickOnBody);

		document.addEventListener("keyup", this.handleKeyUp);
	},

	computed: {
		activeSearchString: function () {
			return this.searchString.length >= 3 ? this.searchString : "";
		},

		searchResults: function () {
			if (this.activeSearchString !== "") {
				return this.documents.filter(
					(d) =>
						d.text.toLowerCase().includes(this.activeSearchString.toLowerCase()) ==
						true
				);
			} else {
				return [];
			}
		}
	},

	methods: {
		handleClickOnBody: function (e) {
			const target = e.target;
			const searchEl = this.$refs.searchEl;

			if (target !== searchEl && !searchEl.contains(target)) {
				this.searchResultsVisible = false;
			} else {
				this.searchResultsVisible = true;
			}
		},

		handleKeyUp: function (e) {
			if (e.key === "Escape") {
				this.searchResultsVisible = false;
			}
		}
	}
});

Here you can find a complete CodePen