我正在使用氧氣生成器開發一個網站，我正在構建一個健康保險頁面，其中將列出專案，并且我想要一個搜索過濾器，它從AZ出現，可選擇，所有字母。當用戶選擇一個字母以僅顯示以所選字符開頭的術語時停止。
我遵循本教程是在氧氣生成器本身并使用jQuery：
https://www.youtube.com/watch?v=4vcYWXt30b8&t
我設法創建了整個結構，它的作業原理與視頻中一樣。
但是現在，我已經從 AZ 添加了字母表中的字母，我需要當用戶選擇一個字母時，他只過濾以該字母開頭的術語。
今天，當用戶選擇一個字母時，搜索會顯示單詞中任何位置包含該字母的每個單詞。
我的過濾器現在怎么樣
所以，正如你在圖片中看到的，我的過濾器目前是這樣的，它有一個搜索欄和要選擇的字母表中的字母。
在示例（附圖）中，我選擇了字母“P”，但結果它回傳了文本中某處包含字母“P”的所有結果！
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.
代碼
<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 代碼
.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代碼
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();
}
uj5u.com熱心網友回復：
我認為問題很可能在這里：
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
這就是說回傳在任何索引中具有目標字母的元素的文本。如果您只想要 FIRST 索引（第一個字母），您可能只需將該行更改為：
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) === 0;
雖然我承認，但我并不完全理解整個createPseudo部分。盡管如此，該代碼符合您得到的結果模式。
另一方面，您可以通過動態創建復選框來節省一些輸入，例如
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/409315.html
標籤：