Maison > Article > interface Web > Explication détaillée du cas_Utilisation de javascript pour écrire le filtrage des conditions de combinaison de listes d'utilisateurs
Cet article explique comment utiliser JS natif pour écrire un filtrage de conditions de combinaison de listes d'utilisateurs ? La fonction de filtrage de conditions combinées peut être exécutée via des boutons et du texte de saisie. Tout d'abord, le rendu précédent :
Ici, un tableau est utilisé pour simuler les données d'arrière-plan. (Ajax peut être utilisé pour demander les données d'arrière-plan) :
var person = [ { name: '王小妹', src: '01pic.jpg', sex: 'male', des: '漂亮的妹子'}, { name: '金小妹', src: '02pic.jpg', sex: 'male', des: '漂亮的程序媛'}, { name: '陈小华', src: '07pic.jpg', sex: 'female', des: '相互学习'}, { name: '马爱国', src: '08pic.jpg', sex: 'female', des: '喜欢猫'}, { name: '邓小茜', src: '04pic.jpg', sex: 'male', des: '喜欢运动'}, { name: '马学习', src: '06pic.jpg', sex: 'female', des: '喜欢看书'} ]
Structure HTML principale :
<body> <p class="wrapper"> <p class="search"> <input type="text" placeholder="请输入用户名" id="input"> <ul id="searchUl"> <li class="active" sex = "all">All</li> <li sex = "male">Male</li> <li sex = "female">Female</li> </ul> </p> <p class="userList"> <ul id="list"> <!-- 方便确定插入数据的结构和样式 --> <!-- <li><img src="./images/01pic.jpg" alt=""> <span class="name">小航</span> <span class="des">描述</span> </li> --> </ul> </p> </p> <script src="./searchingData.js"></script> </body>
Idées et code de base js :
1) Rendu dom structure : utilisez la méthode forEach() pour parcourir le tableau et découvrir. Pour les données qui remplissent les conditions, s'il y a plusieurs éléments de données, plusieurs blocs de code de structure li sont générés, puis la structure li générée est insérée dans ul
var listUl = document.getElementById('list'); var oInp = document.getElementById('input'); var sUl = document.getElementById('searchUl'); //渲染dom结构,遍历数组使用forEach()方法 function render(list){ var str = ''; list.forEach(function(ele, index){ str += '<li><img src="./images/'+ ele.src +'" alt="">\ <span class="name">'+ ele.name +'</span>\ <span class="des">'+ ele.des +'</span></li>'; }); listUl.innerHTML = str; }2) Filtrage de texte dans une zone de saisie unique : obtenez la zone de saisie d'entrée. Pour la valeur d'entrée, liez un événement oninput et utilisez la méthode de filtrage de tableau filter() pour le filtrage de texte
//获取input输入的value值,需绑定一个oninput事件,获取过滤结果后渲染 oInp.oninput = function(){ var text = this.value; //state.text = this.value; //组合条件筛选 render(filterText(text, person)); //单一筛选、渲染 //render(addFn(filterFn,person)); //组合条件筛选、渲染 } //输入文本过滤 function filterText(val, arr){ var fArr = arr.filter(function(ele, index){ if(ele.name.indexOf(val) !== -1){ return true; } }) return fArr; }3) Filtrage par bouton en un seul clic : l'événement de clic est lié à ul et déclenché par li
//绑定点击事件 sUl.addEventListener('click', function(e){ if(e.target.tagName == 'LI'){ var sex = e.target.getAttribute('sex'); //state.sex = e.target.getAttribute('sex'); //组合条件筛选 document.getElementsByClassName('active')[0].className = ''; //修改点击按钮的样式 e.target.className = 'active'; //修改点击按钮的样式 render(filterSex(sex, person)); //render(addFn(filterFn,person));//组合条件筛选、渲染 } }) //点击按钮筛选 function filterSex(sex, arr){ if(sex == 'all'){ return arr; }else{ var sArr = arr.filter(function(ele, index){ if(sex == ele.sex){ return true; } }) return sArr; } }4) Filtrage par condition combinée : connectez l'objet combiné (zone de saisie et bouton) et la fonction de filtrage à travers les accessoires des deux objets
//组合筛选,在一个筛选结果的基础上筛选(修改传入数组arr),参数lastArr上一次筛选返回的数组 //筛选条件:实现筛选条件的函数 var filterFn = { text: filterText, sex: filterSex } //筛选条件:之前的筛选的值text、sex 要改为 state.text state.sex var state = { text: '', sex: 'all' } //组合 function addFn(obj, arr){ var lastArr = arr; for(var prop in obj){ lastArr = obj[prop](state[prop], lastArr); console.log(lastArr); } return lastArr; }Articles connexes :
Code d'implémentation de la fonction de filtrage multi-conditions des données frontales JavaScript
Implémentation JavaScript d'un exemple de fonction de filtrage multi-conditions de données frontales
Vidéos associées :Utilisation de JavaScript-Li Yanhui Tutoriel vidéo Javascript
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!