简单的前端过滤器(纯Js)

原创 huanghang 随笔 JavaScript 47阅读 11 天前 举报

css:

    #filter-data{
        width: 400px;
        height: 400px;
        border: 1px solid red;
        display: flex;
        flex-flow: row wrap;
        margin-top: 24px;
    }
    #filter-data>p{
        margin: 0 6px 0 6px;
        cursor: pointer;
    }
    #app{
        position: absolute;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
    }
    input{
        margin-top: 12px;
        border: 1px solid #cccc77;
    }

html:

<div id="app">

<span>搜索:</span>
<input type="text" id="inputFilter" width="100px"/>
<div id="filter-data"></div>

</div>

js:

var arry = ["成都","长春","苍山","长城",
"公共","城墙","长沙","成功","石家庄","唐山",
"秦皇岛","邯郸","邢台","保定","张家口",
"承德","沧州","廊坊","衡水",
"水货","成果","规划局","安市","同意","欧洲","山清水秀"],
        inputFilter = document.getElementById("inputFilter"),
        filterData =  document.getElementById("filter-data");
window.onload = function(){
    dataList(arry)
};
inputFilter.oninput = function(){
    dataList(domeArryListFilter(this.value));
};

function domeArryListFilter(val){

    var newArry = arry.filter(function(item,index){
        return arry[index].indexOf(val) != -1;
    });
    return newArry;
}

function dataList(dataArry){
    filterData.innerHTML = "";
    var htmlData = "";
    for(var i = 0;i<dataArry.length;i++){
        htmlData += "<p class='tapValue'>"+dataArry[i]+"</p>"
    }
    filterData.innerHTML = htmlData;
    var tapValue = document.getElementsByClassName("tapValue");
    var elemArry = [];
    for(var j = 0;j<tapValue.length;j++){
        elemArry.push(tapValue[j]);
    }
    clickValue(elemArry)
}

function clickValue(elem){
    elem.forEach(function(item,index){
        item.onclick = function(){
            inputFilter.value = this.innerText
        }
    })
}
评论 ( 1 )
最新评论
huanghang 11 天前 1F

这个不算,怎么发表源码啊?各位大佬们!