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.
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 >
<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();
}
CodePudding user response：
I think the issue is most likely here:
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
Which is saying return the text of element which has the target letter in any index. If you want just the FIRST index (the first letter), you could probably just change that line to:
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) === 0;
Though I will admit, I dont fully understand the whole createPseudo part. Nonetheless, that code fits the result pattern you're getting.
On another note, you can save yourself some typing by making your checkboxes dynamically created like
let a = "abcdefghijklmnopqrstuvwxyz".split('');
a.forEach(l => {
l = l.toUpperCase();
jQuery('.checkboxes').append(`<input id='${l}' data-search-term="${l}" type="checkbox">
<label class= "inline-chheckbox" for="${l}">${l}</label>`);
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='checkboxes'></div>