我需要使用字母表中的字母创建搜索过滤器。使用氧气生成器（WordPress）

Question

我正在使用 氧气生成器 开发一个网站，我正在构建一个 健康保险页面 ，其中将列出项目我想要一个 搜索过滤器，它出现在 A-Z 中，可选择，包含所有字母。当用户选择一个字母以仅显示以所选字符开头的术语时停止。

我在氧气生成器中遵循本教程并使用 jQuery:

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

我设法创建了整个结构，并且它像视频中一样工作。

但是现在，我已经添加了 A-Z 中的字母，我需要当用户选择一个字母时，他只过滤以该字母开头的术语。

今天，当用户选择一个字母时，搜索会显示单词中任何位置包含该字母的每个单词。

How is my filter now

所以，如图所示，我的过滤器目前是这样的，它有一个搜索栏和要选择的字母表中的字母。

在示例（附图）中，我选择了字母 'P'，但结果 returns 所有在文本某处包含字母 '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.

HTML 代码

<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();
}

Answer 1

我认为问题最有可能出在这里：

return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;

这就是说 return 在任何索引中具有目标字母的元素的文本。如果您只想要第一个索引（第一个字母），您可以将该行更改为：

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>

我需要使用字母表中的字母创建搜索过滤器。使用氧气生成器（WordPress）

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

html

javascript

wordpress

checkbox

jquery