Filter An HTML List Alphabetically – alphaListNav.js

Category: Javascript | June 14, 2022
Views Total:2,539 views
Official Page:Go to website
Last Update:June 14, 2022


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',{
      // hide on init
      initHidden: false,
      // initial hidden text
      initHiddenText: 'Tap a letter above to view matching items',
      // initial letter
      initLetter: 'A',
      // include All button
      includeAll: true,
      // text for 'all' button
      allText: 'All',
      // text to display when no matching entries
      noMatchText: 'No matching entries',
      // include numbers '0-9'
      includeNums: true,
      // concatinate numbers 0 thu 9 into one button
      concatenateNums: true,
      // include '...' option to filter non-english characters
      includeOther: false,
      // disable empty navigation letters
      flagDisabled: true,
      // remove disabled letters
      removeDisabled: false,
      // an array of prefixes to ignore
      prefixes: [],
      // filter selector
      filterSelector: '',
      // show the number of entries
      showCounts: true,
      // show the heading above the list
      showLetterHeadings: true, 
      // heading tag
      letterHeadingTag: 'h3', 


v0.7.2 (06/14/2022)

  • Add ‘letterHeadingTag’ option and heading id’s.


  • 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