jQuery文字方塊輸入文字自動篩選效果

js程式碼

<script type="text/javascript">
var personArr = [
    { name: '王港', src: 'img/3.png', des: '頸椎不好', sex: 'm' },
{ name: '張三', src: 'img/4.png', des: '描述訊息2', sex: 'm' },
{ name: '李四', src: 'img/5.png', des: '描述訊息3', sex: 'm' },
{ name: '王麻子', src: 'img/1.png', des: '描述訊息4', sex: 'm' },
{ name: '阿海', src: 'img/2.png', des: '描述訊息5', sex: 'm' },
    { name: '劉瑩', src: 'img/5.png', des: '我是誰', sex: 'f' },
    { name: '王秀瑩', src: 'img/4.png', des: '我很好看', sex: 'f' },
    { name: '劉金雷', src: 'img/1.png', des: '你沒有見過陌生的臉', sex: 'm' },
    { name: '劉飛', src: 'img/2.png', des: '瓜皮劉', sex: 'm' }
];
//渲染函數
function renderList(arr) {
    var str = "";
    arr.forEach(function (ele, index) {
        str += '<li>\
                   <img src = '+ ele.src + ' alt = "" >\
                   <p class="username">'+ 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();
    all()
})
//依性別渲染
$("span").on("click", function () {
    $("span").removeClass("active");
    $(this).addClass("active");
    sexVal = $(this).attr("sex");
    all()
})
//根據名字篩選數組
function nameFilter(name, arr) {
    return arr.filter(function (ele, index) {
        return ele.name.indexOf(name) != -1 ? true : false
    })
}
//依性別篩選數組
function sexFilter(sex, arr) {
    if (sex == "a") {
        return arr;
    }
    return arr.filter(function (ele, index) {
        return ele.sex == sex;
    })
}
//合併篩選
function all() {
    var lastArr = nameFilter(searchVal, personArr);
    lastArr = sexFilter(sexVal, lastArr)
    renderList(lastArr)
}

</script>



一個非常簡單的jQuery文字方塊輸入文字自動篩選程式碼，帶有圖片的查詢框文字篩選清單顯示程式碼。