Create An Alphabetical List Index Using jQuery - Alphaindex

Create An Alphabetical List Index Using jQuery - Alphaindex
File Size: 12.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

The Alphaindex jQuery plugin makes it easy to generate an alphabetical index that enables the user to quickly filter through you long list by clicking on the alphabets (A-Z). Similar to the Apple iOS' contact list.

See also:

How to use it:

1. Add the latest version of jQuery library and the jQuery Alphaindex plugin's script to your html page.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="jquery.alphaindex.js"></script>

2. Assuming that you have a long html list as this:

<ul id="my-list">
  <li value="AF">Afghanistan</li>
  <li value="AL">Albania</li>
  <li value="DZ">Algeria</li>
  <li value="AS">American Samoa</li>
  <li value="AD">Andorra</li>
  <li value="AG">Angola</li>
  <li value="AI">Anguilla</li>
  <li value="AG">Antigua &amp; Barbuda</li>
  <li value="AR">Argentina</li>
  <li value="AA">Armenia</li>
  <li value="AW">Aruba</li>
  <li value="AU">Australia</li>
  <li value="AT">Austria</li>
  <li value="AZ">Azerbaijan</li>
  ...
</ul>

3. Just call the main function makeAlphaIndex() on the list and we're done.

$('#my-list').makeAlphaIndex()

4. Active first index.

$('#my-list').makeAlphaIndex({
  activateFirstIndex: true,
})

5. Show/hide the item count.

$('#my-list').makeAlphaIndex({
  showItemsCount: true
})

Change log:

2017-01-17

  • Added 'activateFirstIndex' option.

This awesome jQuery plugin is developed by idlesign. For more Advanced Usages, please check the demo page or visit the official website.