输入价格后失去焦点就展示符合条件的商品，没有符合条件的商品就弹框提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<span> 请输入手机价格（输入能接受的最高价值）：</span>
<input type="text" autofocus>
<ul>
</ul>
</div>
<script>
const arr = [
{
name: '小米',
price: 2999,
},
{
name: '红米',
price: 2000,
},
{
name: '魅族',
price: 2599,
},
{
name: '华为',
price: 7999,
},
{
name: '荣耀',
price: 2899,
},
{
name: '联想',
price: 999,
},
{
name: '三星',
price: 9999,
},
{
name: '苹果',
price: 7999,
},
{
name: '诺基亚',
price: 299,
},
{
name: 'vivo',
price: 2399,
},
{
name: 'oppo',
price: 2499,
},
]
const ul = document.querySelector('ul')
const input = document.querySelector('input')
input.addEventListener('blur', function () {
ul.innerHTML = ''//输入前先清空
const newArr = arr.filter(function (item) {//筛选低于输入框的数据
return item.price <= input.value
})
if (newArr.length !== 0) {
newArr.forEach(function (item) {
let li = document.createElement('li')//创建li来填充数据
ul.appendChild(li)
li.innerHTML = item.name + item.price
})
} else {
alert('没有找到符合地商品')
}
})
</script>
</body>
</html>
