文件名称:
jQuery文本框输入文字自动筛选效果.zip
开发工具:
文件大小: 95kb
下载次数: 0
上传时间: 2019-07-11
详细说明：
js代码 [removed] 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 = \ 
\ ele.name
\ ele.des
\ }) $("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) } [removed] 一款非常简单的jQuery文本框输入文字自动筛选代码，带图片的查询框文字筛选列表显示代码。
(系统自动生成,下载前可以参看下载内容)
下载文件列表
相关说明
- 本站资源为会员上传分享交流与学习,如有侵犯您的权益,请联系我们删除.
- 本站是交换下载平台，提供交流渠道，下载内容来自于网络，除下载问题外，其它问题请自行百度。
- 本站已设置防盗链，请勿用迅雷、QQ旋风等多线程下载软件下载资源，下载后用WinRAR最新版进行解压.
- 如果您发现内容无法下载，请稍后再次尝试；或者到消费记录里找到下载记录反馈给我们.
- 下载后发现下载的内容跟说明不相乎，请到消费记录里找到下载记录反馈给我们，经确认后退回积分.
- 如下载前有疑问，可以通过点击"提供者"的名字，查看对方的联系方式，联系对方咨询.
相关搜索:
