写这篇文章的目的是了解后台是如何实现模糊查询这个功能的。延伸到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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。