How to add search in bookmarks in PDF.js

Question:

Answer:

Add this code to viewer.html inside this div

<div class=\"splitToolbarButton toggled\">

<input type=\"search\" style=\"width: 100%;\" value=\'\' placeholder=\"Find in bookmraks\" class=\"toolbarField\" onkeyup=\"filterBookmarks(this.value)\"/>

Then add this javascript code to the end of viewer.html

    <script>
      function filterBookmarks(searchText){
        var found = new Array();
        var bookMarks = document.getElementsByClassName(\'outlineItem\');
        if(searchText.trim() != \'\'){
          // var bookMarks = document.getElementById(\"outlineView\");
          
          for(var i=0;i < bookMarks.length; i++){
            var text = bookMarks[i].firstChild.innerText;
            if(text.includes(searchText)){
              found.push(bookMarks[i]);
              bookMarks[i].style.display = \"block\";
              // console.log(\'bookMarks: \', bookMarks[i]);
            }else{
              bookMarks[i].style.display = \"none\";
            }
          }
        }
        // display all text
        if(searchText.trim() == \'\' || found.length == 0)
        for(var i=0;i < bookMarks.length; i++){
          bookMarks[i].style.display = \"block\";
        }
      }
  </script>

Related Posts