Create An Alphabetical List Index Using jQuery - Alphaindex
File Size: | 12.6 KB |
---|---|
Views Total: | 4080 |
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 & 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.