Adding Live Search to Blog

I added a live search, or instant search to my blog. This type of search modifies page contents based on the query, instead of directing you to a new page with the results. You can see it in action if you click the magnifier icon below the title of my blog and begin typing. In my case the code filters the blog post container based on the search query and hides all the list items (blog post titles) which do not contain the query. There is some additional code to handle the icon sliding left and right, based on whether there is text in the input field, but this is purely cosmetic.

HTML:

<div id="blogSearchInputContainer" class="blogSearchInputContainer">
	<input type="text" id="blogSearchInput" class="blog-search-input" placeholder="">
</div>

JAVASCRIPT:

document.addEventListener('DOMContentLoaded', function() {
const subString = 'devlog';
const getURL = window.location.href;
const blogSearchInputContainer = document.querySelector('#blogSearchInputContainer');
if (getURL.includes(subString)) {
//embed the search bar
const blogTitle = document.querySelector('#block-yui_3_17_2_1_1723055432501_22056');
blogTitle.insertAdjacentElement("afterend", blogSearchInputContainer);
//handle search
const blogSearchInput = document.querySelector('#blogSearchInput');
const debounceDelay = 700;
let debounceTimeout;
blogSearchInput.addEventListener('input', function() {
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(() => {
const titles = document.querySelectorAll('.custom-post-title');
const query = this.value.toLowerCase();
titles.forEach(title => {
const titleText = title.textContent.toLowerCase();
const listItem = title.closest('li');
if (titleText.includes(query)) {
listItem.style.display = '';
} else {
listItem.style.display = 'none';
}
});
}, debounceDelay);
});
//clear input if click outside of search depending on input value
var hasText = false;
function checkInput() {
hasText = blogSearchInput.value.trim() !== '';
}
document.addEventListener('click', function(event) {
checkInput();
if (event.target !== blogSearchInput && hasText == false) {
blogSearchInput.classList.remove('texted');
} else {
blogSearchInput.classList.add('texted');
}
});
} else {
blogSearchInputContainer.remove();
}
});

CSS:

#blogSearchInputContainer {
  max-width: 2200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 50px;
  margin: 0;
  padding: 0;
  top: -10px;
}
#blogSearchInput {
  width: 200px;
  height: 50px !important;
  display: block;
  background: transparent;
  border: 0 !important;
  font-size: 1.3rem;
  letter-spacing: 1.8px;
  outline: none;
  padding: 0;
  margin: 0;
  text-align: center;
  z-index: 999;
  transition: all .7s ease !important;
  background-image: url(https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/2b60bbec-4d1c-4d73-9d6a-009b9bf1d26a/SearchCrosshairIcon.png);
  background-size: 50px;
  background-position: bottom 0px left 50%;
  background-repeat: no-repeat;
  padding-left: 50px !important; 
}
#blogSearchInput:focus {
  outline: none; 
  transition: all .7s ease;
  background-position: bottom 0px left -6px;
} 
#blogSearchInput.texted {
  outline: none; 
  transition: all .7s ease;
  background-position: bottom 0px left -6px;
}