AlphaListNav.js

Filter An HTML List Alphebetically

AlphaListNav.js is a JavaScript plugin that will add an alphebetical navigation bar to all of your lists. Click a letter to quickly filter the list to show items that match that letter. With many different options and features.

Get Started

Load the stylesheet alphaListNav.css in the <head> section.


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

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


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

Add/create the HTML of your list. Give in an id attribute.


  <ul id="myList">
    <li>Apples</li>
    <li>Blueberries</li>
    <li>Carrots</li>
    <li>Eggplant</li>
  </ul>
          

Initialize the AlphaListNav library on your list by passing it the id of your list.


  <script>
    new AlphaListNav('myList');
  </script>
          

Or to customize the behavior of AlphaListNav by overriding the various options, like so: (list of all the options below).


  <script>
    new AlphaListNav('myList', {
      initLetter: 'A',
      includeAll: false,
      includeNums: false,
      removeDisabled: true
    });
  </script>
          

Configuration

The following are all the AlphaListNav options and their default values.

Options Description Default
initHidden Hide all the list items initially, until you click a letter. true
initHiddenText Message to display to users when the initHidden = true. (string or boolean false for no text shown at all). "Tap a letter above to view matching items"
initLetter Filter the list to a specific letter on init ('a'-'z', '-' for [numbers 0-9], '_' for [other], '*' for [All]). ""
includeAll Include the "ALL" button. true
allText set custom text for the ALL button. "All"
includeNums Include numbers '0-9' to filter by. true
concatenateNums Concatenate numbers 0 thu 9 into one button [0 - 9] true
includeOther Include a '...' button to filter non-english characters by. false
removeDisabled Remove empty navigation letters. false
flagDisabled Make empty navigation letters disabled and greyed out. true
showLetterHeadings Show the letter heading above each list. true
showCounts Show the number of list items that match that letter above the mouse. true
filterSelector Set the filter to a CSS selector rather than the first text letter for each item. ""
prefixes An array of prefixes to ignore, ie ['the', 'a', 'my'] (array of strings and/or RegEx's). []

 

Example Demos

  • Demo 1
  • Demo 2
  • Demo 3
  • Demo 4

Default Configuration:

Here is the default configuration with no options passed in.


  const myListElem = document.getElementById('demoList1');

  new AlphaListNav(myListElem);

 

  • 6 Blueberries
  • 3 ripe Tomatoes
  • 2 Cloves Garlic
  • Alfalfa Sprouts
  • Apple
  • Apricot
  • Artichoke
  • Asian Pear
  • Asparagus
  • Atemoya
  • Avocado
  • Bamboo Shoots
  • Banana
  • Bean Sprouts
  • Beans
  • Beets
  • Belgian Endive
  • Bell Peppers
  • Bitter Melon
  • Blackberries
  • Blueberries
  • Bok Choy
  • Boniato
  • Boysenberries
  • Broccoflower
  • Broccoli
  • Brussels Sprouts
  • Cabbage
  • Cactus Pear
  • Cantaloupe
  • Carambola
  • Carrots
  • Casaba Melon
  • Cauliflower
  • Celery
  • Chayote
  • Cherimoya
  • Cherries
  • Coconuts
  • Collard Greens
  • Corn
  • Cranberries
  • Cucumber
  • Dates
  • Dried Plums
  • Eggplant
  • Endive
  • Escarole
  • Feijoa
  • Fennel
  • Figs
  • Garlic
  • Gooseberries
  • Grapefruit
  • Grapes
  • Green Beans
  • Green Onions
  • Greens
  • Guava
  • Hominy
  • Honeydew Melon
  • Horned Melon
  • Iceberg Lettuce
  • Jerusalem Artichoke
  • Jicama
  • Kale
  • Kiwifruit
  • Kohlrabi
  • Kumquat
  • Leeks
  • Lemons
  • Lettuce
  • Lima Beans
  • Limes
  • Longan
  • Loquat
  • Lychee
  • Madarins
  • Malanga
  • Mandarin Oranges
  • Mangos
  • Mulberries
  • Mushrooms
  • Napa
  • Nectarines
  • Okra
  • Onion
  • Oranges
  • Papayas
  • Parsnip
  • Passion Fruit
  • Peaches
  • Pears
  • Peas
  • Peppers
  • Persimmons
  • Pineapple
  • Plantains
  • Plums
  • Pomegranate
  • Potatoes
  • Prickly Pear
  • Prunes
  • Pummelo
  • Pumpkin
  • Quince
  • Radicchio
  • Radishes
  • Raisins
  • Raspberries
  • Red Cabbage
  • Rhubarb
  • Romaine Lettuce
  • Rutabaga
  • Shallots
  • Snow Peas
  • Spinach
  • Sprouts
  • Squash
  • Strawberries
  • String Beans
  • Sweet Potato
  • Tangelo
  • Tangerines
  • Tomatillo
  • Tomato
  • Turnip
  • Ugli Fruit
  • Water Chestnuts
  • Watercress
  • Watermelon
  • Waxed Beans
  • Yams
  • Yellow Squash
  • Yuca/Cassava
  • Zucchini Squash
  • Äpfel
  • Über alle

 

Initialize the starting letter with initLetter and using includeAll, includeNums, and includeOther:

In this demo, we're configuring the 4 most common options:
1. Start the list with all "A" letters showing initially (initLetter: 'a').
2. we're removing the ability to show All list items by removing the "All" button (includeAll: false).
3. We're allowing the list to show items that start with characters that aren't in the english alphebet by adding the "..." button (includeOther: true).
4. We're removing the ability to show list items that start with numbers by removing the "0-9" button (includeNums: false)


  const myListElem2 = document.getElementById('demoList2');

  new AlphaListNav(myListElem2, {
    initLetter: 'a',
    includeAll: false,  
    includeOther: true,
    includeNums: false,
  });

 

  • 6 Blueberries
  • 3 ripe Tomatoes
  • 2 Cloves Garlic
  • Alfalfa Sprouts
  • Apple
  • Apricot
  • Artichoke
  • Asian Pear
  • Asparagus
  • Atemoya
  • Avocado
  • Bamboo Shoots
  • Banana
  • Bean Sprouts
  • Beans
  • Beets
  • Belgian Endive
  • Bell Peppers
  • Bitter Melon
  • Blackberries
  • Blueberries
  • Bok Choy
  • Boniato
  • Boysenberries
  • Broccoflower
  • Broccoli
  • Brussels Sprouts
  • Cabbage
  • Cactus Pear
  • Cantaloupe
  • Carambola
  • Carrots
  • Casaba Melon
  • Cauliflower
  • Celery
  • Chayote
  • Cherimoya
  • Cherries
  • Coconuts
  • Collard Greens
  • Corn
  • Cranberries
  • Cucumber
  • Dates
  • Dried Plums
  • Eggplant
  • Endive
  • Escarole
  • Feijoa
  • Fennel
  • Figs
  • Garlic
  • Gooseberries
  • Grapefruit
  • Grapes
  • Green Beans
  • Green Onions
  • Greens
  • Guava
  • Hominy
  • Honeydew Melon
  • Horned Melon
  • Iceberg Lettuce
  • Jerusalem Artichoke
  • Jicama
  • Kale
  • Kiwifruit
  • Kohlrabi
  • Kumquat
  • Leeks
  • Lemons
  • Lettuce
  • Lima Beans
  • Limes
  • Longan
  • Loquat
  • Lychee
  • Madarins
  • Malanga
  • Mandarin Oranges
  • Mangos
  • Mulberries
  • Mushrooms
  • Napa
  • Nectarines
  • Okra
  • Onion
  • Oranges
  • Papayas
  • Parsnip
  • Passion Fruit
  • Peaches
  • Pears
  • Peas
  • Peppers
  • Persimmons
  • Pineapple
  • Plantains
  • Plums
  • Pomegranate
  • Potatoes
  • Prickly Pear
  • Prunes
  • Pummelo
  • Pumpkin
  • Quince
  • Radicchio
  • Radishes
  • Raisins
  • Raspberries
  • Red Cabbage
  • Rhubarb
  • Romaine Lettuce
  • Rutabaga
  • Shallots
  • Snow Peas
  • Spinach
  • Sprouts
  • Squash
  • Strawberries
  • String Beans
  • Sweet Potato
  • Tangelo
  • Tangerines
  • Tomatillo
  • Tomato
  • Turnip
  • Ugli Fruit
  • Water Chestnuts
  • Watercress
  • Watermelon
  • Waxed Beans
  • Yams
  • Yellow Squash
  • Yuca/Cassava
  • Zucchini Squash
  • Äpfel
  • Über alle

 


  const myListElem3 = document.getElementById('demoList3');

  new AlphaListNav(myListElem3, {
    initHidden: false,
    prefixes: ['The'],
    removeDisabled: true,
  });

 

  • No Doubt
  • Avenged Sevenfold
  • Grateful Dead
  • Kings of Leon
  • Alice in Chains
  • The Script
  • Five Finger Death Punch
  • Muse
  • Rage Against the Machine
  • The Fray
  • Steely Dan
  • Evanescence
  • The Cure
  • Huey Lewis & the News
  • Scorpions
  • INXS
  • Three Days Grace
  • Slipknot
  • Styx
  • Goo Goo Dolls
  • The Offspring
  • Disturbed
  • The Kinks
  • Korn
  • Limp Bizkit
  • Dave Matthews Band
  • Steve Miller Band
  • Mumford & Sons
  • Arctic Monkeys
  • Creed
  • System of a Down
  • The Smashing Pumpkins
  • Matchbox Twenty
  • Alice Cooper
  • REO Speedwagon
  • The Cars
  • Toto
  • Deep Purple
  • 3 Doors Down
  • Oasis
  • Iron Maiden
  • The Cranberries
  • Paramore
  • The Killers
  • Depeche Mode
  • The Doobie Brothers
  • Boston
  • Radiohead
  • Marilyn Manson
  • Bob Seger & the Silver Bullet Band
  • Dire Straits
  • Blink-182
  • Panic! at the Disco
  • Electric Light Orchestra
  • Gorillaz
  • ZZ Top
  • Rush
  • Kiss
  • R.E.M.
  • Genesis
  • OneRepublic
  • ABBA
  • Tom Petty and the Heartbreakers
  • The Police
  • Fall Out Boy
  • Heart
  • Foo Fighters
  • Def Leppard
  • Nickelback
  • Black Sabbath
  • Foreigner
  • Pearl Jam
  • Green Day
  • Lynyrd Skynyrd
  • The Doors
  • Coldplay
  • The Beach Boys
  • The Who
  • Nirvana
  • Chicago
  • Santana
  • Creedence Clearwater Revival
  • Journey
  • Van Halen
  • U2
  • Bon Jovi
  • Maroon 5
  • Red Hot Chili Peppers
  • Linkin Park
  • Fleetwood Mac
  • Aerosmith
  • Guns N' Roses
  • Metallica
  • Eagles
  • AC/DC
  • The Rolling Stones
  • Pink Floyd
  • Queen
  • Led Zeppelin
  • The Beatles

 

More demos coming soon! ...


Issues

If you run into an issue or find a bug with alphaListNav.js, Please let me know!

please sumbit all issues to the AlphaListNav GitHub Repo. Click on the Issues tab or click here to open an issue.

Contributers welcome.

Author:

Bryan Elliott