js代码

<script>
  // 定义首个查询下键
  var active = 0;
  $('.ayui-btn').click(function(){
    search();
  })
  function search(){
    // 获取搜索框的值
    var kwds = $("#searchInput").val();
    // 获取第一个列表内容
    var this_one = {};
    var real_name = '';
    // 定义数据列表
    var list = $("#all_list .list_one");
    // 定义查找的起始值
    var true_one = 0;
    for (var i = 0; i < list.length; i++) {
      this_one = $(list[i]);

      real_name = this_one.text().toString();
      // 执行like匹配
      if(real_name.match(kwds)){
        // 处理第当前的结果
        if(true_one == active){
          // 获取窗口的宽和高
          var windows_wdh = $(window).width();
          var windows_hgt = $(window).height();
          // 获取第一个坐标
          var x_len = this_one.offset().left;
          var y_len = this_one.offset().top;
          // 驱动滚动条滚动到指定的位置
          $("html,body").animate({scrollTop:(y_len-windows_hgt/2), scrollLeft:(x_len-windows_wdh/2)},500);
          // 标记当前选中的结果
          this_one.addClass('active');
          this_one.removeClass('on');
        }else{
          // 标记符合的结果
          this_one.addClass('on');
          this_one.removeClass('active');
        }
        // 累加真实的选择
        true_one++;
      }else{
        this_one.removeClass('on');
      }
    }
    // 判断是否搜索完毕 如果搜索完毕 则从第一个开始 否则继续搜索下一个
    active = active >= true_one-1 ? 0 : active+1;

    return false;
  }
</script>

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。