当前位置:首页 > Web前端 > HTML > 内容列表

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

次查看

所属栏目:

  • HTML

详细内容

前台效果:

1c47607531c598617a5e8004471ebc1.png

html

<span class="container" style="z-index: 999" id="searchDiv">
       <span 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>
       </span>
   </span>

相关教程推荐: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页面中实现查找功能的详细内容,更多请关注php中文网其它相关文章!

相关标签:


网站建设


热门推荐

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

    本文为大家介绍了如何在html页面中实现查找功能,具有一定的参考价值,希望可以帮助到大家。先把上一次的查询结果清除掉,然后根据key的值,用正则表达式把区域内所有匹配的字符全都加上特殊的样式。

  • html注释的规范用法总结

    本文来自html教程栏目,文中为大家总结了html注释的规范用法,对初学者有一定的参考价值,希望可以帮助到大家。html注释:【<!--注释内容-->】。

  • 详解html中页面跳转传递参数的问题

    本文为大家介绍了html中页面跳转传递参数的问题,具有一定的参考价值,希望可以帮助到大家。页面跳转传递参数要求在a页面点击跳转按钮后,在b页面可以获取到对应的值。

  • html如何提高页面的加载速度

    本文来自html入门教程栏目,文中为大家介绍了html提高页面的加载速度的方法,具有一定的参考价值,希望对大家有所帮助。html提高页面的加载速度的方法:1、减少HTTP的请求;2、定义图片的宽和高。


相关内容

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

    本文为大家介绍了如何在html页面中实现查找功能,具有一定的参考价值,希望可以帮助到大家。先把上一次的查询结果清除掉,然后根据key的值,用正则表达式把区域内所有匹配的字符全都加上特殊的样式。

  • html如何提高页面的加载速度

    本文来自html入门教程栏目,文中为大家介绍了html提高页面的加载速度的方法,具有一定的参考价值,希望对大家有所帮助。html提高页面的加载速度的方法:1、减少HTTP的请求;2、定义图片的宽和高。

  • 详解html中页面跳转传递参数的问题

    本文为大家介绍了html中页面跳转传递参数的问题,具有一定的参考价值,希望可以帮助到大家。页面跳转传递参数要求在a页面点击跳转按钮后,在b页面可以获取到对应的值。

  • html注释的规范用法总结

    本文来自html教程栏目,文中为大家总结了html注释的规范用法,对初学者有一定的参考价值,希望可以帮助到大家。html注释:【<!--注释内容-->】。