如何在html页面中实现查找功能

前台效果：

htML

div class="container" style="z-index: 999" id="seArchDiv">
           div class="keyword-search">
               查找：           input id="key" tyPE="text" style="width: 200px;
    " placeholder="关键词" />
               a href="javascript:void(0);
    " class="prev" onclick='wordsearch(1)'>
    i class="c-icon">
    /i>
    /a>
               a href="javascript:void(0);
    " class="next" onclick='wordSearch()'>
    i class="c-icon">
    /i>
    /a>
           /div>
       /div>
    

相关教程推荐：html教程

js

script>
    //搜索功能      VAR oldKey0 = "";
          var index0 = -1;
    var oldCount0 = 0;
          var newflag = 0;
          var currentLength = 0;
      function wordSearch(flg) {
              var key = $("#key").val();
 //取key值          if (!key) {
                  return;
 //key为空则退出          }
              getArray();
              focusNext(flg);
      }
      function focusNext(flg) {
          if (newflag == 0) {
    //如果新搜索,index清零              index0 = 0;
          }
          if (!flg) {
              if (oldCount0 != 0) {
//如果还有搜索                  if (index0  oldCount0) {
    //左边如果没走完，走左边                      focusMove(index0);
                          index0++;
                  }
 else if (index0 == oldCount0) {
    //都走完了                      index0 = 0;
                          focusMove(index0);
                          index0++;
                  }
                  else {
                          index0 = 0;
    //没确定                      focusMove(index0);
                          index0++;
                  }
              }
          }
 else {
              if (oldCount0 != 0) {
    //如果还有搜索                  if (index0 = oldCount0 &
    &
     index0 >
 0) {
    //左边如果没走完，走左边                      index0--;
                          focusMove(index0);
                  }
 else if (index0 == 0) {
    //都走完了                      index0 = oldCount0;
                          index0--                      focusMove(index0);
                  }
              }
          }
      }
      function getArray() {
              newflag = 1;
              $(".contrast .result").removeClass("res");
              var key = $("#key").val();
 //取key值          if (!key) {
                  oldKey0 = "";
                  return;
 //key为空则退出          }
          if (oldKey0 != key || $(".current").length != currentLength) {
                  //重置              index0 = 0;
                  var index = 0;
              $(".contrast .result").each(function () {
                      $(this).replaceWITh($(this).html());
              }
    );
                  pos0 = new Array();
              if ($(".contrast-wrap").hasClass("current")) {
                      currentLength = $(".current").length;
                  $(".current .contrast").each(function () {
                          $(this).html($(this).html().replace(new RegExp(key, "gm"), "span id='result" + (index++) + "' class='result'>
    " + key + "/span>
    "));
 // 替换                  }
    );
              }
 else {
                      $(".contrast-wrap").addClass('current');
                      currentLength = $(".current").length;
                  $(".contrast").each(function () {
                          $(this).html($(this).html().replace(new RegExp(key, "gm"), "span id='result" + (index++) + "' class='result'>
    " + key + "/span>
    "));
 // 替换                  }
    );
              }
                  //$("#key").val(key);
                  oldKey0 = key;
              //$(".contrast .result").each(function () {
                  //    $(this).parents('.contrast-wrap').addClass('current');
                  //    pos0.push($(this).offset().top);
              //}
    );
                  // pos0.push($(".contrast .result:eq(2)").offset().top - $(".contrast .result:eq(2)").parents(".contrast").offset().top);
                  oldCount0 = $(".contrast .result").length;
                  newflag = 0;
          }
      }
      function focusMove(index0) {
              $(".contrast .result:eq(" + index0 + ")").parents('.contrast-wrap').addClass('current');
              $(".contrast .result:eq(" + index0 + ")").addClass("res");
              var top = $(".contrast .result:eq(" + index0 + ")").offset().top + $(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop();
              var intop = top - $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top;
          $(".contrast .result:eq(" + index0 + ")").parents(".contrast").aniMATE({
 scrollTop: intop }
    , 200);
          if ($(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop() == 0) {
              $("html, body").animate({
 scrollTop: top - 200 }
    , 200);
          }
 else {
              $("html, body").animate({
 scrollTop: $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top - 200 }
    , 200);
          }
      }
      $('#key').change(function () {
          if ($('#key').val() == "") {
                  index0 = 0;
              $(".contrast .result").each(function () {
                      $(this).replaceWith($(this).html());
              }
    );
                  oldKey0 = "";
          }
      }
    );
      /script>
    

视频教程推荐：html视频教程

以上就是如何在html页面中实现查找功能的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！