js实现模糊查询

Posted 2021-09-24 阳哥

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现模糊查询相关的知识，希望对你有一定的参考价值。

写这篇文章的目的是了解后台是如何实现模糊查询这个功能的。延伸到js上,这种思维有利于前端转后台，因为后台很多实现的功能和js差不多。
本案例主要根据基金代码或者基金名称进行模糊查询

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js根据基金名称或代码实现模糊查询</title>
    </head>
    <body>
        <input type="text" onInput="onInput(this.value)" value="">
        <ul id="list">
            
        </ul>
        <div id="no-data" style="display: none;">没找到数据~~</div>
        <script type="text/javascript">
            let oList = document.querySelector(\'#list\');
            let oNoData = document.querySelector(\'#no-data\');
            let queryArr = [];
            let allFundList = [
                {
                fundname:\'吴彦祖基金\',
                  fundcode:"005120",
                  netVal:\'2.0842\',
                  netValDate:\'05-13\',
                  dailyIncrease:"-8.28424",
                  aggresiveRatio:\'55.842442\',
                  isChosen:true
              },
              {
                fundname:\'宋小宝基金\',
                  fundcode:"883883",
                  netVal:\'2.0842\',
                  netValDate:\'05-13\',
                  dailyIncrease:"-8.282424",
                  aggresiveRatio:\'55.842424\',
                  isChosen:true
              },
              {
                fundname:\'周星驰基金\',
                  fundcode:"883880",
                  netVal:\'2.0842\',
                  netValDate:\'05-13\',
                  dailyIncrease:"-8.28",
                  aggresiveRatio:\'55.84\',
                  isChosen:true
              },
              {
                fundname:\'吴孟达基金\',
                  fundcode:"883889",
                  netVal:\'2.0842\',
                  netValDate:\'05-13\',
                  dailyIncrease:"-8.28",
                  aggresiveRatio:\'55.84\',
                  isChosen:true
              },
              {
                fundname:\'刘德华基金\',
                  fundcode:"780090",
                  netVal:\'2.0842\',
                  netValDate:\'05-13\',
                  dailyIncrease:"-8.28",
                  aggresiveRatio:\'55.84\',
                  isChosen:true
              },
              {
                fundname:\'黎明基金\',
                  fundcode:"780050",
                  netVal:\'2.0842\',
                  netValDate:\'05-13\',
                  dailyIncrease:"-8.28",
                  aggresiveRatio:\'55.84\',
                  isChosen:true
              },
            
              {
                fundname:\'郭富城基金\',
                  fundcode:"780042",
                  netVal:\'2.0842\',
                  netValDate:\'05-13\',
                  dailyIncrease:"-8.28",
                  aggresiveRatio:\'55.84\',
                  isChosen:true
              },
              {
                fundname:\'张学友基金\',
                  fundcode:"005121",
                  netVal:\'2.0842\',
                  netValDate:\'05-13\',
                  dailyIncrease:"-8.28",
                  aggresiveRatio:\'55.84\',
                  isChosen:true
              },
              {
                fundname:\'成龙基金\',
                  fundcode:"005122",
                  netVal:\'2.0842\',
                  netValDate:\'05-13\',
                  dailyIncrease:"-8.28",
                  aggresiveRatio:\'55.84\',
                  isChosen:true
              },
              {
                fundname:\'易烊千玺基金\',
                  fundcode:"005123",
                  netVal:\'2.0842\',
                  netValDate:\'05-13\',
                  dailyIncrease:"-8.28",
                  aggresiveRatio:\'55.84\',
                  isChosen:true
              }];
        let li;
        function onInput(val){
            console.log(val)
            if(oList.innerHTML !== \'\')clearList();//清空列表
            li = \'\';
            for(let item of allFundList){
                if(item.fundname.match(val) || item.fundcode.match(val)){
                    queryArr.push(item);
                }
            }
            console.log(queryArr)
            for(let item2 of queryArr){
                li += 
                \'<div><li>\' 
                + item2.fundname + \'</li>\' + \'<li>\' 
                + item2.fundcode + 
                \'</li></div></br>\';
            }
            console.log(li);
            oList.innerHTML = li;
            if(oList.innerHTML === \'\'){
                oNoData.style.display = \'block\';
            }else{
                oNoData.style.display = \'none\';
            }
        }
        function clearList(){
                oList.innerHTML = \'\';    
                queryArr = [];
        }
        </script>
    </body>
</html>

以上是关于js实现模糊查询的主要内容，如果未能解决你的问题，请参考以下文章