JavaScript 自动筛选
分类: 程序开发 897 7
- html,body{
- height: 100%;
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- .main{
- width: 300px;
- margin: 80px auto;
- }
- .auto-complate input{
- width: 200px;
- height: 20px;
- padding: 0;
- }
- .auto-complate ul{
- padding: 0;
- margin: 0;
- }
- .auto-complate li{
- list-style: none;
- }
- .filter-container img{
- width: 80px;
- }
- .filter-container{
- display: flex;
- align-items: center;
- border: 1px solid #666666;
- }
- <div class="main">
- <div class="auto-complate">
- <input type="text" id="textDate" placeholder="请输入关键词">
- <ul id="filterList">
- </ul>
- </div>
- </div>
- var textInput = document.querySelector('#textDate')
- var filterList = document.querySelector('#filterList')
- // 数据源
- var data = [{
- name:'王子豪',
- id:1,
- pinyin:'wangzihao'
- },
- {
- name:'小强',
- id:2,
- pinyin:'xiaoqiang'
- },
- {
- name:'杨日华',
- id:3,
- pinyin:'yangrihua'
- },
- {
- name:'万克浩',
- id:4,
- pinyin:'wankehao'
- }]
- function doFileter(key){
- key = key.toLowerCase()
- // 把字符串转化为小写
- return data.filter(function(item){
- if(item.name.indexOf(key) > -1 || item.id.toString().indexOf(key) > -1){
- return item
- }
- })
- }
- function binhdhtml(key){
- var arr = doFileter(key)
- var str = ''
- for(var i = 0;i <arr.length;i++){
- str += '<li>'
- str += '<div class="filter-container"><span>' + arr[i].name + '</span><img src="http://wx4.sinaimg.cn/mw690/9e5389bbly1fhzpxlonefj20go0gon1i.jpg"></div>'
- str +='</li>'
- }
- filterList.innerHTML =str
- }
- textInput.onkeyup = function(){
- var key = textInput.value
- binhdhtml(key)
- }
共 7 条评论关于 “JavaScript 自动筛选”