Filter An HTML List Alphabetically – alphaListNav.js

Category: Javascript | August 7, 2019
Author: elliottprogrammer
Views Total: 314
Official Page: Go to website
Last Update: August 7, 2019
License: MIT


Filter An HTML List Alphabetically – alphaListNav.js


alphaListNav.js is the vanilla JS version of the listnav jQuery plugin that dynamically generates alphabetical navigation links to filter an HTML list alphabetically.

How to use it:

Load the stylesheet alphaListNav.css in the header.

<link rel="stylesheet" href="alphaListNav.css">

Load the JavaScript alphaListNav.js right before the </body> tag.

<script src="alphaListNav.js"></script>

Initialize the alphaListNav.js library on your list. Done.

<ul id="list-nav" class="list-nav">
  <li class="item-class"><a href="">bsarokee</a></li>
  <li class="item-class"><a href="">Agency</a></li>
  <li class="item-class"><a href="">Alberton</a></li>
  <li class="item-class"><a href="">Alder</a></li>
const cityList = new AlphaListNav('list-nav');

Set the initial letter. Default: ‘A’.

const cityList = new AlphaListNav('list-nav',{
      initLetter: 'B'

Determine whether to show all list items on init. Default: false.

const cityList = new AlphaListNav('list-nav',{
      includeAll: true



  • v0.0.3

You Might Be Interested In:

Leave a Reply