Filter An HTML List Alphabetically – alphaListNav.js

Category: Javascript | February 18, 2020
Views Total:3,494 views
Official Page:Go to website
Last Update:February 18, 2020


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

Full configuration options with default values.

const cityList = new AlphaListNav('list-nav',{
      initHidden: false,
      initHiddenText: 'Tap a letter above to view matching items',
      initLetter: 'A',
      includeAll: true,
      allText: 'All',
      noMatchText: 'No matching entries',
      includeNums: true,
      concatenateNums: true,
      includeOther: false,
      flagDisabled: true,
      removeDisabled: false,
      prefixes: [],
      filterSelector: '',



  • allow for multiple instances

v0.7.1 (02/16/2020)

  • improve letter-count positioning

v0.7.0 (02/03/2020)

  • added additional options


  • v0.0.3

You Might Be Interested In:

Leave a Reply