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