Сортировка списка HTML по буквам на Javascript

Я пробую делать русско-португальский словарь с помощью виджета Accordion. Каждая словарная статья в своём ящике, которая откроется по щелчку. Вот то, что сделано до сих пор:

A вот код HTML для статьей. Он повторяется в четырёх статях, с другими словами внутри скобок, которые определяют искомый термин. Морфология слова, падежи, перевод на португальский.

<div class="accordionWrapper">
   <div class="accordionItem close">
      <h2 class="accordionItemHeading">авианосец</h2>
      <div class="accordionItemContent">
          <p class="entry">авиано́с||ец <sub class="morfol">m</sub></p>         
          <p class="case">G.sing.= <span class="declen">-ца</span></p>
          <p class="case">N.pl.= <span class="declen">-цы</span></p>
          <p class="case">G.pl.= <span class="declen">-цев</span></p>
          <p class="transl">porta-aviões <sub class="morfol_transl">m</sub></p>       
      </div>
   </div>
 (...)
 </div>

Вот код CSS:

            .accordionItem {
                display: block;
                (...)
            }
            .accordionItemHeading {
                cursor: pointer;
                (...)
            }
            .close .accordionItemContent {
                height:0px;
                -webkit-transform: scaleY(0);
                float:left;
                display:block;
            }
            .open .accordionItemContent {
                display:block;
                -webkit-transform: scaleY(1);
                -webkit-transform-origin: top;
                (...)
            }
            .open .accordionItemHeading {
                margin:0px;
                (...)
            }

А вот код Javascript, для определения аккордеона:

<script>   
        var accItem = document.getElementsByClassName('accordionItem');
        var accHD = document.getElementsByClassName('accordionItemHeading');
        for (i = 0; i < accHD.length; i++) {
            accHD[i].addEventListener('click', toggleItem, false);
        }
        function toggleItem() {
            var itemClass = this.parentNode.className;
            for (i = 0; i < accItem.length; i++) {
                accItem[i].className = 'accordionItem close';
            }
            if (itemClass == 'accordionItem close') {
                this.parentNode.className = 'accordionItem open';
            }
        }
</script> 

Код для аккордеона я скопировал и адаптировал из jsFiddle.
С сих пор, мне хочется добавить линейку сортировки по первым буквам каждого термина.

В W3Schools я нашёл этот пример на странице "Filter List".

Когда ввожу букву "a" в линейку поиска, список сортируется. Между тем, судя по результату, это не фильтр по первой букве, а фильтр по содержанию данной буквы внутри слова.

Я хотел бы сделать похожий инструмент сортировки с линейкой поиска, который сортирует статьи аккордеона по буквам в начале слова. Но не знаю, как адаптировать пример из W3Schools, какие классы надо заменить какими, и т.д.. Что делать? Спасибо.

P.S.: Если хочу добавлять массу слов в будущем, лучше связать страницу с базой данных посредством языка PHP, или достаточно удобно добавлять файлу HTML статью в раз?