数组和filter()的使用

数组和filter()的使用

• 将数组按条件过滤组成新数组

  <section class="fixed-top bg-white">
          <div class="p-2">
              <a href="./enter.html" class="btn btn-primary">添加企业</a>
          </div>
  
          <div class="mb-2">
              <div class="mb-2">
                  <input type="text" id="companNameInput" class="form-control" placeholder="请输入机构名称">
              </div>
              <button class="company-btn btn btn-success w-100">查找</button>
          </div>
  </section>
  <div style="height: 160px;"></div>
  <section>
          <div class="company-list list-group">
  
          </div>
  
          <section id="company-modal" style="display: none;">
              <div class="list-group-item">
                  <span class="company-name" data-id="1">海南省AAA公司</span>
                  <button class="add-account float-right btn btn-sm btn-outline-success">添加账号</button>
              </div>
          </section>
  </section>
  
  <script src="/js/jquery.min.js"></script>
  <script src="/js/bootstrap4/js/bootstrap.min.js"></script>
  <script src="./mock/mock.js"></script>
  <script src="./mock/mockData.js"></script>
  <script>
          //初始化数组
          var companyAll = [];
  
          $(function () {
              
              //获取企业列表，给数组companyAll赋值  
              getCompany();
              //单击查找按钮的事件
              $(".company-btn").on('click', function () {
                  //获取输入的值
                  var companyText = $("#companNameInput").val();
                  //新建正则
                  var companyReg = new RegExp(companyText);
                  //使用filte ，返回新的数组
                  var newCompanys = companyAll.filter(item => {
                      //正则的test方法验证是否包含，如果包含则为true 结果为true则返回组成新的数组
                      return companyReg.test(item.companyname)
                  })
                  //新数组的长度大于0时才执行渲染
                  if (newCompanys.length > 0) {
                      forCompany(newCompanys)
                  } else {
                      $(".company-list").empty();
                      alert("未查询到机构");
                  }
              })
              //for循环渲染的DOM通过上面的方式单击事件无效
              //需指定父元素再通过以下方式单击事件才生效
              $(".company-list").on("click",".add-account",function(){
                  var companyName=$(this).prev(".company-name").html();
                  var companyId=$(this).prev(".company-name").attr("data-id");
                  location.href("./release.html");
              })
  
          })
  
          // 获取企业列表
          function getCompany() {
              $.getJSON("/company/companylist", function (rst) {
                  companyAll = rst.rows;
              })
          }
  
          // 遍历查询数据 
          function forCompany(companys) {
  
              $(".company-list").empty();
  
              for (let index = 0; index < companys.length; index++) {
                  const element = companys[index];
                  $("#company-modal .company-name").html(element.companyname);
                  $("#company-modal .company-name").attr("data-id", element.companyid);
                  $(".company-list").append($("#company-modal").html());
              }
  
          }
  
  </script>