I need to create a search filter using letters of the alphabet. Using Oxygen Builder (Wordpress)

[aangeloca]

I'm developing a website using the oxygen builder, I'm building a health insurance page where the items will be listed and I want a search filter where it appears from A-Z, selectable, with all the letters. Stops when the user selects a letter to display only the terms starting with the selected character.

I followed this tutorial is in the oxygen builder itself and uses jQuery:

https://www.youtube.com/watch?v=4vcYWXt30b8&t

I managed to create the entire structure and it works as in the video.

But now, I've added the letters of the alphabet from A-Z and I need that when the user selects a letter, he only filters the term that starts with that letter.

Today when the user selects a letter, the search displays every word that has that letter anywhere in the word.

How is my filter now

so, as you can see in the image, my filter is currently like this, it has a search bar and the letters of the alphabet to be selected.

In the example (attached image), I selected the letter 'P' but as a result it returns all results that have the letter 'P' somewhere in the text!

I want, that when selecting the character 'P' for example it displays only the medical agreements beginning with the letter 'P' which are the ones highlighted with green in the example image.

HTML CODE

<label for="#filter">Buscar Convênio </label>
<input id="filter" type="text">


<div class="checkboxes">
	
<input id= '#a' data-search-term="a" type="checkbox">
<label class= "inline-chheckbox" for="#a">A</label>

<input id= '#b' data-search-term="B" type="checkbox">
<label class= "inline-chheckbox" for="#b">B</label>
	
<input id= '#c' data-search-term="C" type="checkbox">
<label class= "inline-chheckbox" for="#c">C</label>
 	
<input id= '#D' data-search-term="D" type="checkbox">
<label class= "inline-chheckbox" for="#D">D</label>

<input id= '#E' data-search-term="E" type="checkbox">
<label class= "inline-chheckbox" for="#E">E</label>

<input id= '#F' data-search-term="F" type="checkbox">
<label class= "inline-chheckbox" for="#F">F</label>

<input id= '#G' data-search-term="G" type="checkbox">
<label class= "inline-chheckbox" for="#G">G</label>

<input id= '#H' data-search-term="H" type="checkbox">
<label class= "inline-chheckbox" for="#H">H</label>

<input id= '#I' data-search-term="I" type="checkbox">
<label class= "inline-chheckbox" for="#I">I</label>

<input id= '#J' data-search-term="J" type="checkbox">
<label class= "inline-chheckbox" for="#J">J</label>

 	
<input id= '#K' data-search-term="K" type="checkbox">
<label class= "inline-chheckbox" for="#K">K</label>

<input id= '#L' data-search-term="L" type="checkbox">
<label class= "inline-chheckbox" for="#L">L</label>

<input id= '#M' data-search-term="M" type="checkbox">
<label class= "inline-chheckbox" for="#M">M</label>

<input id= '#N' data-search-term="N" type="checkbox">
<label class= "inline-chheckbox" for="#N">N</label>

<input id= '#O' data-search-term="O" type="checkbox">
<label class= "inline-chheckbox" for="#O">O</label>

<input id= '#P' data-search-term="P" type="checkbox">
<label class= "inline-chheckbox" for="#P">P</label>

<input id= '#Q' data-search-term="Q" type="checkbox">
<label class= "inline-chheckbox" for="#Q">Q</label>

<input id= '#R' data-search-term="R" type="checkbox">
<label class= "inline-chheckbox" for="#R">R</label>

<input id= '#S' data-search-term="S" type="checkbox">
<label class= "inline-chheckbox" for="#S">S</label>

<input id= '#T' data-search-term="T" type="checkbox">
<label class= "inline-chheckbox" for="#T">T</label>

<input id= '#U' data-search-term="U" type="checkbox">
<label class= "inline-chheckbox" for="#U">U</label>

<input id= '#V' data-search-term="V" type="checkbox">
<label class= "inline-chheckbox" for="#V">V</label>

<input id= '#X' data-search-term="X" type="checkbox">
<label class= "inline-chheckbox" for="#X">X</label>

<input id= '#W' data-search-term="W" type="checkbox">
<label class= "inline-chheckbox" for="#W">W</label>

<input id= '#Y' data-search-term="Y" type="checkbox">
<label class= "inline-chheckbox" for="#Y">Y</label>

<input id= '#Z' data-search-term="Z" type="checkbox">
<label class= "inline-chheckbox" for="#Z">Z</label>

</div>

CSS CODE

.fast-filter {
	display: flex;
	flex-direction: column;
	align-items: center;

	color: white;
}

.fast-filter label {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 8px;
}

.fast-filter input {
	border-style: none;
	background-color: white;
	border-radius: 8px;
	padding: 8px;
	font-size: 32px;
	width: 100%;
	max-width:768px;
}

.checkboxes {
	margin-top: 32px;
}

.checkboxes [data-search-term] {
	display: none;
}

.checkboxes label {
	padding: 7px;
	border-radius: 8px;
	border: 1px solid white;
	margin-left: 5px;
	margin-right: 5px;
	font-size: 16px;
	text-align: center;
	line-height: 3.5;
}

.checkboxes [data-search-term]:checked + label {
	background-color: #69C3E8;
	border: 1px solid #69C3E8;
}

JS CODE

jQuery.expr[":"].CIcontains = jQuery.expr.createPseudo( function (arg) {
	return function (elem) {
		return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
	};
});

jQuery('#filter').keyup(function() {
	var curr_text = jQuery(this).val();
	filterResults(curr_text);
})

jQuery('.fast-filter input[type="checkbox"]').change( function() {
	
	var thisID = jQuery(this).attr('id');
	
	jQuery('.fast-filter input[type="checkbox"]').each( function() {
		if( jQuery(this).attr('id') != thisID) {
			jQuery(this).prop('checked', false);
		}
	})
	
	if( jQuery(this).is(':checked') ) {
		var curr_text = jQuery(this).data('search-term');
		filterResults(curr_text);
	} else {
		filterResults('');
	}
	
	
})

function filterResults(curr_text) {
	jQuery('.card').hide();
	jQuery('.card:CIcontains("' + curr_text + '")').show();
}