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实现模糊查询

阳哥

引用和评论

vue数据响应式的原理（通俗易懂）附源码

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

你可能不知道的图片加载相关知识

原生electron起步-从零到一完成构建和打包

巧用 CSS 实现高频出现的复杂怪状按钮 - 镂空的内凹圆角边框

Base64编码的“暗坑”：解密失败？可能是这些原因！