How to add search in bookmarks in PDF.js

Question:

How to add search in bookmarks in PDF.js

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>