jQueryテキストボックス入力テキスト自動フィルタリング効果

js コード

<script type="text/javascript">
var personArr = [
    { name: 'Wanggang', src: 'img/3.png', des: '悪い頸椎', 性別: 'm' },
{ name: '張三', src: 'img/4.png', des: '説明情報2', 性別: 'm' },
{ name: '李思', src: 'img/5.png', des: '説明情報 3', 性別: 'm' },
{ name: 'Wang Mazi', src: 'img/1.png', des: '説明情報 4', 性別: 'm' },
{ name: 'アハイ', src: 'img/2.png', des: '説明情報5', 性別: 'm' },
    { name: 'Liu Ying', src: 'img/5.png', des: 'Who am I', sex: 'f' },
    { name: '王秀英', src: 'img/4.png', des: '私はとてもイケメンです', 性別: 'f' },
    { name: 'Liu Jinlei', src: 'img/1.png', des: '変な顔を見たことがない', 性別: 'm' },
    { name: 'Liu Fexiang'、src: 'img/2.png'、des: 'Guapi Liu'、性別: 'm' }
];
//レンダリング関数
関数 renderList(arr) {
    var str = "";
    arr.forEach(関数 (ele, インデックス) {
        str += '
\
                   <img src = '+ ele.src + ' alt = "" >\
                   <p class="ユーザー名">'+ ele.name + '</p>\
                   <p class="des">'+ ele.des + '</p>\
               </li> '
    })
    $("ul").html(str)
}
renderList(personArr)
// 名前に基づいてレンダリングします
var searchVal = "";
var sexVal = "a";
$(".search-box").on("input", function () {
    searchVal = $(this).val();
    全て（）
})
// 性別に基づいてレンダリングします
$("スパン").on("クリック", function () {
    $("スパン").removeClass("アクティブ");
    $(this).addClass("アクティブ");
    sexVal = $(this).attr("sex");
    全て（）
})
// 配列を名前でフィルタリングします
関数名Filter(name, arr) {
    return arr.filter(function (ele,index) {
        return ele.name.indexOf(name) != -1 ? true : false
    })
}
// 性別に基づいて配列をフィルタリングします
関数 sexFilter(sex, arr) {
    if (性別 == "a") {
        arrを返します。
    }
    return arr.filter(function (ele,index) {
        return ele.sex == セックス;
    })
}
//フィルタを結合
関数 all() {
    var lastArr = nameFilter(searchVal, personArr);
    lastArr = sexFilter(sexVal, lastArr)
    renderList(lastArr)
}

</スクリプト>



非常にシンプルな jQuery テキスト ボックス入力テキスト自動フィルタリング コード、クエリ ボックス テキスト フィルタリング リスト表示コード (画像付き)。