Added quick search functionality

src/options.css

@@ -37,6 +37,10 @@
 
 /* Phrase & URL lists */
 
+#PhraseLists__search {
+  margin-bottom: 1.5rem;
+}
+
 #PhraseList--invisible,
 #PhraseListPreview--invisible {
   display: none;

src/options.html

@@ -170,6 +170,7 @@ <h1 class="title">Settings</h1>
 
       <div class="container" id="PhraseLists">
         <h2 class="title">Lists</h2>
+        <input class="input" type="text" id="PhraseLists__search" placeholder="Search phrases..." />
         <div class="box PhraseList" id="PhraseList--invisible">
           <div class="columns">
             <div class="column is-three-fifths">

src/options.js

@@ -14,6 +14,7 @@ $(function () {
 
     // These handlers should only be ran once.
     if (fresh) {
+      setupSearchPhraseListsHandler();
       addExistingURLLists(options);
       setPrimarySettings(options);
       setupAutoHighlightHandler();
@@ -57,6 +58,21 @@ $(function () {
     }
   }
 
+  function setupSearchPhraseListsHandler() {
+    $('#PhraseLists__search').on('keyup', function () {
+      $('.PhraseList__phrase').each(function () {
+        let $phrase = $(this);
+        let phraseText = $phrase.text().toLowerCase();
+        let searchText = $('#PhraseLists__search').val().toLowerCase();
+        if (phraseText.indexOf(searchText) === -1) {
+          $phrase.hide();
+        } else {
+          $phrase.show();
+        }
+      });
+    });
+  }
+
   function setupAutoHighlightHandler() {
     $('#Settings__enableAutoHighlight').on('click', function () {
       showHideAutoHighlightSettings();