共计 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> |
正文完
发表至： javascript
2021-03-11
