jQuery plug-in inspired by ListNav plugin originally created and maintained by Eric Steinborn will add a slick "letter-based" navigation bar to all of your lists with the proper Bootstrap markup. Click a letter to quickly filter the list to show items that match that letter. The next release of this extension will also add a search functionality that you can bind to your controls.
To understand better what this extension accomplishes - check out this sample page!
<link rel="stylesheet" href="datalist.css"><ul id="myList">...</ul><script src="jQuery-datalist.js"></script>
<script>
$("#myList").datalist();
</script>$("myList").listnav({
initLetter: '', // filter the list to a specific letter on init ('a'-'z', '-' [numbers 0-9], '_' [other])
optionAll: true, // Include the ALL button
optionOther: false, // Include a '...' option to filter special charachters by
optionNums: true, // Include a '0-9' option to filter by
removeDisabled: false, // Remove the disabled elements from navigation items. Does not apply to artificially added elements (optionAll/optionNums/optionOther)
notFoundText: 'No matching entries', // set custom text for nav items with no content to show
searchControlName: '', // Set the search control ID to bind the search functionality to.
navigationClass: 'btn-default' // Set the navigation control classes. EIther default bootstrap classes: btn-default, btn-primary or your own classes
});