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