如何在更改页面后重新加载markjs?

时间:2018-06-04 14:34:31

标签: javascript jquery search highlight

我正在成功使用mark.js并且当我们返回第一次出现时我添加了一个条件然后我们更改页面(因为我正在使用它分页数据表)。

代码:

jQuery(function() {

            // the input field
            var $input = jQuery("input[type=\'search\']"),
              // clear button
              $clearBtn = jQuery("button[data-search=\'clear\']"),
              // prev button
              $prevBtn = jQuery("button[data-search=\'prev\']"),
              // next button
              $nextBtn = jQuery("button[data-search=\'next\']"),
              // the context where to search
              $content = jQuery(".search_content"),
              // jQuery object to save <mark> elements
              $results,
              // the class that will be appended to the current
              // focused element
              currentClass = "current",
              // top offset for the jump (the search bar)
              offsetTop = 50,
              // the current index of the focused element
              currentIndex = 0;

            /**
             * Jumps to the element matching the currentIndex
             */
            function jumpTo() {
              if ($results.length) {

                var position,
                  $current = $results.eq(currentIndex);

                $results.removeClass(currentClass);
                if ($current.length) {
                  $current.addClass(currentClass);
                  position = $current.offset().top - offsetTop - 100;
                  window.scrollTo(0, position);
                }
              }
            }

            /**
             * Searches for the entered keyword in the
             * specified context on input - Note the 'on input'
             */

            $input.on("input", function() {
                var searchVal = this.value;
              $content.unmark({
                done: function() {
                  $content.mark(searchVal, {
                    separateWordSearch: true,
                    done: function() {
                      $results = $content.find("mark");
                      currentIndex = 0;
                      jumpTo();
                    }
                  });
                }
              });
            });

            /**
             * Clears the search
             */
            $clearBtn.on("click", function() {
              $content.unmark();
              $input.val("").focus();
            });

            /**
             * Next and previous search jump to
             */
            $nextBtn.add($prevBtn).on("click", function() {
              if ($results.length) {
                currentIndex += jQuery(this).is($prevBtn) ? -1 : 1;
                if (currentIndex < 0) {
                  currentIndex = $results.length - 1;
                }
                if (currentIndex > $results.length - 1) {
                  currentIndex = 0;
                }
                //THE PART WHERE I CHANGE THE PAGE
                if(currentIndex == 0 && jQuery(this).is($nextBtn)){
                  if(confirm("No more instances found! Go to the next page?")){
                    alert("NEXT PAGE");
                    jQuery("a[data-page=\'2\']").click();
                    //need to trigger an input event or to search again?
                  }else{
                      //do nothing
                  }
                }
                jumpTo();
              }
            });

          });

因此,您可以看到此行:jQuery("a[data-page=\'2\']").click();允许我们更改页面 但是当它完成后,我想跳转到第一次出现的新页面如果有的话,而不是必须改变输入。

所以我试着写

$("#input").val(
    $("#input").val() + "a"
  );

即使它不是理想的解决方案,它也是一种向搜索输入添加内容以触发“输入事件”的方法,但即使成功添加了caracter,它也无法正常工作

我也试过写:

                     $content.unmark({
                        done: function() {
                          $content.mark(searchVal, {
                            separateWordSearch: true,
                            done: function() {
                              $results = $content.find("mark");
                              currentIndex = 0;
                              jumpTo();
                            }
                          });
                        }
                      });
页面更改后

,并使searchVal全局,但它也没有做任何事情

所以我被困在这里,试图在第二页上自动搜索我的学期但没有成功,你能帮忙吗?

0 个答案:

没有答案