李钟意讲前端

外观

咨询/接单/付费bug修复/学习交流群

接口测试题目 ​

一、通过 ajax 获取商品，把商品显示到页面中，通过检索关键里搜索商品信息。 ​

已知道商品数据结构为 ​

js
var data = [
  {name: '毛衣', price: 10},
  {name: '短裙', price: 9},
  {name: '马甲', price: 3},
  {name: '牙膏', price: 99},
  {name: '衣架', price: 22}
];

请在下面输出你的代码 ​

在线访问地址 /examples/html-api/index.html

html
<!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>
    <input id="search" type="text" placeholder="请输入关键字检索" />
    <ul id="product-wrap">
      <!-- <li class="product-item">
        <span class="item-name"></span>
        <span class="item-price"></span>
      </li>
      <li class="product-item">
        <span class="item-name"></span>
        <span class="item-price"></span>
      </li>
      <li class="product-item">
        <span class="item-name"></span>
        <span class="item-price"></span>
      </li>
      <li class="product-item">
        <span class="item-name"></span>
        <span class="item-price"></span>
      </li> -->
    </ul>
    <script>
      //   var arr = [
      //     { name: "zhangsan", price: 10 },
      //     { name: "zhangsan2", price: 10 },
      //     { name: "zhangsan3", price: 10 },
      //     { name: "zhangsan4", price: 10 },
      //   ];
      var arr = [
        {name: '李四', price: 10},
        {name: '王武', price: 20},
        {name: '赵六', price: 10},
        {name: '李白', price: 111}
      ];

      var textTempl = '';

      arr.forEach(function (item, index) {
        textTempl =
          textTempl +
          '<li><span class="item-name">' +
          item.name +
          '</span>，<span class="item-price">' +
          item.price +
          '</span></li>';
      });

      console.log('textTempl', textTempl);

      var productWrap = document.getElementById('product-wrap');

      productWrap.innerHTML = textTempl;

      // 1. 获取 input 的值
      // 2. input 输出发生改变
      // 3. 如果改变，我是不是检索数据有没有，正则表达式
      // 4. 如果有，那么展示出来

      var searchElement = document.getElementById('search');
      console.log('searchElement.value', searchElement.value);

      // change vs input 事件的区别
      // searchElement.addEventListener('input')
      // 通过监听输入的事件
      // 来检索数据
      searchElement.addEventListener('input', function (event) {
        // console.log("searchElement event change", event);
        console.log('event.target.value', event.target.value);

        var newArr = arr.filter(function (item) {
          return item.name.indexOf(event.target.value) !== -1;
        });

        console.log('newArr', newArr);

        var textTempl = '';

        newArr.forEach(function (item, index) {
          textTempl =
            textTempl +
            '<li><span class="item-name">' +
            item.name +
            '</span>，<span class="item-price">' +
            item.price +
            '</span></li>';
        });
        productWrap.innerHTML = textTempl;
      });
    </script>
  </body>
</html>