关于javascript:js实现模糊查询

37次阅读

共计 2300 个字符，预计需要花费 6 分钟才能阅读完成。

写这篇文章的目标是理解后盾是如何实现含糊查问这个性能的。延长到 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>

正文完