<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="search">
<input type="text" id="kd">
<button id="btn">搜索</button>
</div>
<ul id="list">
<li>
<img src="" alt="">
<h3></h3>
<p></p>
<strong></strong>
</li>
</ul>
<script>
// var arr = [
// ['vivo手机', '拍照真垃圾', '￥9.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
// ['qianfeng1', '学习使我快乐', '￥9999.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
// ['qianfeng2', '教的真好啊', '￥9999.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
// ['qianfeng3', '工资真高啊', '￥2229.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
// ['qianfeng4', '学完还有对象了', '￥92999.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
// ['qianfeng1', '学习使我快乐', '￥9999.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
// ['qianfeng2', '教的真好啊', '￥9999.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
// ['qianfeng3', '工资真高啊', '￥2229.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
// ['qianfeng4', '学完还有对象了', '￥92999.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
// ['qianfeng3', '工资真高啊', '￥2229.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
// ['qianfeng4', '学完还有对象了', '￥92999.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
// ['qianfeng4', '学完还有对象了', '￥92999.9', 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp'],
// ]
var arr2 = [
{
img: 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp',
title: '手机1',
describe: '学完还有对象了',
price: '$9.9'
},
{
img: 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp',
title: '手机2',
describe: '学完还有对象了2',
price: '$99.9'
},
{
img: 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp',
title: '电脑1',
describe: '学完还有对象了',
price: '$9.9'
},
{
img: 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp',
title: '电脑2',
describe: '学完还有对象了2',
price: '$99.9'
},
{
img: 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp',
title: 'qianfeng4',
describe: '学完还有对象了',
price: '$9.9'
},
{
img: 'https://img30.360buyimg.com/seckillcms/s200x200_jfs/t1/82252/22/1511/170813/5cfdb265E283d3ffb/52c7144ae41bba5c.jpg!q70.jpg.webp',
title: 'qianfeng4',
describe: '学完还有对象了2',
price: '$99.9'
},
]
$('list').innerHTML = renderList(arr2)
// 实现搜索
// var arr = [1, 2, 3, 4];
// // 找到大于2的数 --- 返回一个新的数组
// var res = arr.filter(function (val) {
// return val > 2
// })
// var res = arr2.filter(function (val) {
// return val.title.includes('手机')
// })
// console.log(res);
$('btn').onclick = function () {
// 拿到用户输入的关键字
var keyword = $('kd').value;
// 找到满足条件的数据
var res = arr2.filter(function (val) {
// 判断数据中的标题中是否包含此关键字
return val.title.includes(keyword)
})
$('list').innerHTML = renderList(res)
}
function renderList(arr2) {
var html = '';
// 首先遍历数据 -- 有多少条数据，就有多少个li
// val实际上数组的值 实际上就是一个对象
arr2.forEach(function (val) {
html += `
<li>
<img src="${val.img}" alt="">
<h3>${val.title}</h3>
<p>${val.describe}</p>
<strong>${val.price}</strong>
</li>
`
})
console.log(html);
return html
}
function $(id) {
return document.getElementById(id)
}
</script>
</body>
</html>
