jQuery text box input text automatic filtering effect

js code

<script type="text/javascript">
var personArr = [
    { name: 'Wanggang', src: 'img/3.png', des: 'Bad cervical vertebra', sex: 'm' },
{ name: 'Zhang San', src: 'img/4.png', des: 'Description information 2', sex: 'm' },
{ name: '李思', src: 'img/5.png', des: 'Description information 3', sex: 'm' },
{ name: 'Wang Mazi', src: 'img/1.png', des: 'Description information 4', sex: 'm' },
{ name: 'Ahai', src: 'img/2.png', des: 'Description information 5', sex: 'm' },
    { name: 'Liu Ying', src: 'img/5.png', des: 'Who am I', sex: 'f' },
    { name: 'Wang Xiuying', src: 'img/4.png', des: 'I'm very good-looking', sex: 'f' },
    { name: 'Liu Jinlei', src: 'img/1.png', des: 'You have never seen a strange face', sex: 'm' },
    { name: 'Liu Feixiang', src: 'img/2.png', des: 'Guapi Liu', sex: 'm' }
];
//Rendering function
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)
//Render based on name
var searchVal = "";
var sexVal = "a";
$(".search-box").on("input", function () {
    searchVal = $(this).val();
    all()
})
//Render based on gender
$("span").on("click", function () {
    $("span").removeClass("active");
    $(this).addClass("active");
    sexVal = $(this).attr("sex");
    all()
})
//Filter the array by name
function nameFilter(name, arr) {
    return arr.filter(function (ele, index) {
        return ele.name.indexOf(name) != -1 ? true : false
    })
}
//Filter the array based on gender
function sexFilter(sex, arr) {
    if (sex == "a") {
        return arr;
    }
    return arr.filter(function (ele, index) {
        return ele.sex == sex;
    })
}
//Merge filter
function all() {
    var lastArr = nameFilter(searchVal, personArr);
    lastArr = sexFilter(sexVal, lastArr)
    renderList(lastArr)
}

</script>



A very simple jQuery text box input text automatic filtering code, query box text filtering list display code with pictures.