百搜论坛欢迎您的加入!
adimg adimg
 
昨日:篇  今日:篇   总帖:篇   会员:
博主最大Lv63   
如何在html页面中实现查找功能     

前台效果:

1c47607531c598617a5e8004471ebc1.png

html

1

2

3

4

5

6

7

8

<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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

<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页面中实现查找功能的详细内容

 0  已被阅读了887次  楼主 2020-06-22 12:12:50
回复列表

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

联系站长 友链申请桂ICP备19000949号-1     桂ICP备19000949号-1
您的IP:3.21.76.0,2024-04-29 16:18:13,Processed in 0.03623 second(s).
免责声明: 本网不承担任何由内容提供商提供的信息所引起的争议和法律责任。
Powered by HadSky 7.12.9
已有0次打赏
(0) 分享
分享
取消
免责声明
1、本站资源,均来自网络,版权归原作者,所有资源和文章仅限用于学习和研究目的 。
2、不得用于商业或非法用途,否则,一切责任由该用户承担 !
如果觉得本文还不错请点个赞或者打赏点轻币哦~
拒绝伸手党,拿走请回复,尊重楼主,尊重你我他~

侵权删除请致信 E-Mail:207882320@qq.com