I have an "ul" list of names. I would to create an alphabetical vertical sidebar that when I click on one of his letter, the li names that begin with that letter were filtered.
Example: this is for mobile, I need it for web application.
I didn't found any plugins or code example.
UPDATE: explanation:
The list is already sorted. I need just an alphabetic vertical sidebar used for scroll the list up and down.
You can achieve this easily by doing something like this:
A simple code to achieve this:
$("ul li").each(function() {
var current = $(this).text()[0];
if (current != previous) {
$(this).attr("id", "first_letter_" + current);
previous = current;
$("#index").append("<a href='#first_letter_" + current + "'>" + current + "</a><br/>");
}
});
And you can see it working on this demo (or on this JSFiddle):
$(document).ready(function() {
// set the previous to an invalid value
var previous = "";
// create the lateral index holder
$("body").append("<div id='index'></div>");
// traverse the list elements
$("ul li").each(function() {
// get the first character of that element
var current = $(this).text()[0];
// if it's different from the previous one
if (current != previous) {
// add a unique id to the element
$(this).attr("id", "first_letter_" + current);
// update the previous value
previous = current;
// add a link into the alphabetical index
$("#index").append("<a href='#first_letter_" + current + "'>" + current + "</a><br/>");
}
});
});#index {
position:fixed;
top:0px;
right:0px;
width:30px;
background:rgba(0,0,0,0.1);
font-size:12px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>List of Shakespearean characters:</h2>
<ul>
<li>Aaron</li>
<li>Abbot</li>
<li>Abhorson</li>
<li>Abraham</li>
<li>Achilles</li>
<li>Adam</li>
<li>Adrian</li>
<li>Adriana</li>
<li>Aedile</li>
<li>Aegeon</li>
<li>Aemilia</li>
<li>Aemilius</li>
<li>Aeneas</li>
<li>Agamemnon</li>
<li>Agrippa</li>
<li>Ajax</li>
<li>Alcibiades</li>
<li>Alexander</li>
<li>Alexander Iden</li>
<li>Alexas</li>
<li>Alice</li>
<li>All</li>
<li>All Citizens</li>
<li>All Conspirators</li>
<li>All Ladies</li>
<li>All Lords</li>
<li>All Servants</li>
<li>All the Goths</li>
<li>All The People</li>
<li>Alonso</li>
<li>Ambassador</li>
<li>Amiens</li>
<li>Andromache</li>
<li>Angelo</li>
<li>Angus</li>
<li>Anne Bullen</li>
<li>Anne Page</li>
<li>Another</li>
<li>Antigonus</li>
<li>Antiochus</li>
<li>Antipholus of Ephesus</li>
<li>Antipholus of Syracuse</li>
<li>Antonio</li>
<li>Antony</li>
<li>Apemantus</li>
<li>Apothecary</li>
<li>Archbishop Cranmer</li>
<li>Archbishop of Canterbury</li>
<li>Archbishop Scroop</li>
<li>Archidamus</li>
<li>Ariel</li>
<li>Artemidorus</li>
<li>Arthur</li>
<li>Arviragus</li>
<li>Attendant</li>
<li>Attendants</li>
<li>Audrey</li>
<li>Autolycus</li>
<li>Bagot</li>
<li>Balthasar</li>
<li>Balthazar</li>
<li>Banditti</li>
<li>Banquo</li>
<li>Baptista Minola</li>
<li>Bardolph</li>
<li>Barnardine</li>
<li>Bassanio</li>
<li>Basset</li>
<li>Bassianus</li>
<li>Bastard of Orleans</li>
<li>Bates</li>
<li>Bawd</li>
<li>Beadle</li>
<li>Beatrice</li>
<li>Belarius</li>
<li>Benedick</li>
<li>Benvolio</li>
<li>Bernardo</li>
<li>Bertram</li>
<li>Bianca</li>
<li>Biondello</li>
<li>Biron</li>
<li>Bishop Lincoln</li>
<li>Bishop of Carlisle</li>
<li>Bishop of Ely</li>
<li>Blanch</li>
<li>Blunt</li>
<li>Boatswain</li>
<li>Bolingbroke</li>
<li>Bona</li>
<li>Borachio</li>
<li>Both</li>
<li>Both Citizens</li>
<li>Both Tribunes</li>
<li>Bottom</li>
<li>Boult</li>
<li>Boy</li>
<li>Boyet</li>
<li>Brabantio</li>
<li>Brandon</li>
<li>Brothers</li>
<li>Brutus</li>
<li>Bushy</li>
<li>Caesar</li>
<li>Caithness</li>
<li>Caius Lucius</li>
<li>Calchas</li>
<li>Caliban</li>
<li>Calpurnia</li>
<li>Camillo</li>
<li>Canidius</li>
<li>Caphis</li>
<li>Captain</li>
<li>Capucius</li>
<li>Capulet</li>
<li>Cardinal Bourchier</li>
<li>Cardinal Campeius</li>
<li>Cardinal Pandulph</li>
<li>Cardinal Wolsey</li>
<li>Carrier</li>
<li>Casca</li>
<li>Cassandra</li>
<li>Cassio</li>
<li>Cassius</li>
<li>Celia</li>
<li>Ceres</li>
<li>Cerimon</li>
<li>Chamberlain</li>
<li>Charles</li>
<li>Charles, King of France</li>
<li>Charmian</li>
<li>Chatillon</li>
<li>Children</li>
<li>Chiron</li>
<li>Chorus</li>
<li>Christopher Sly</li>
<li>Christopher Urswick</li>
<li>Cicero</li>
<li>Cinna</li>
<li>Cinna the Poet</li>
<li>Citizen</li>
<li>Citizens</li>
<li>Claudio</li>
<li>Claudius</li>
<li>Cleomenes</li>
<li>Cleon</li>
<li>Cleopatra</li>
<li>Clerk</li>
<li>Clerk of Chatham</li>
<li>Clitus</li>
<li>Cloten</li>
<li>Clown</li>
<li>Cobweb</li>
<li>Cominius</li>
<li>Commons</li>
<li>Conrade</li>
<li>Constable of France</li>
<li>Constance</li>
<li>Cordelia</li>
<li>Corin</li>
<li>Coriolanus</li>
<li>Cornelius</li>
<li>Costard</li>
<li>Countess</li>
<li>Countess of Auvergne</li>
<li>Court</li>
<li>Courtezan</li>
<li>Cressida</li>
<li>Crier</li>
<li>Cromwell</li>
<li>Cupid</li>
<li>Curan</li>
<li>Curio</li>
<li>Curtis</li>
<li>Cymbeline</li>
<li>Dancer</li>
<li>Dardanius</li>
<li>Daughter of Antiochus</li>
<li>Davy</li>
<li>Decius Brutus</li>
<li>Deiphobus</li>
<li>Demetrius</li>
<li>Dennis</li>
<li>Dercetas</li>
<li>Desdemona</li>
<li>Diana</li>
<li>Dick the Butcher</li>
<li>Diomedes</li>
<li>Dion</li>
<li>Dionyza</li>
<li>Doctor</li>
<li>Doctor Butts</li>
<li>Doctor Caius</li>
<li>Dogberry</li>
<li>Dolabella</li>
<li>Doll Tearsheet</li>
<li>Domitius Enobarus</li>
<li>Don Adriano de Armado</li>
<li>Don John</li>
<li>Don Pedro</li>
<li>Donalbain</li>
<li>Dorcas</li>
<li>Dromio of Ephesus</li>
<li>Dromio of Syracuse</li>
<li>Duchess of Gloucester</li>
<li>Duchess of York</li>
<li>Duke</li>
<li>Duke of Albany</li>
<li>Duke of Alencon</li>
<li>Duke of Aumerle</li>
<li>Duke of Bedford</li>
<li>Duke of Bourbon</li>
<li>Duke of Buckingham</li>
<li>Duke of Burgundy</li>
<li>Duke of Cornwall</li>
<li>Duke of Exeter</li>
<li>Duke of Florence</li>
<li>Duke of Gloucester</li>
<li>Duke of Milan</li>
<li>Duke of Norfolk</li>
<li>Duke of Orleans</li>
<li>Duke of Suffolk</li>
<li>Duke of Surrey</li>
<li>Duke of Venice</li>
<li>Duke of York</li>
<li>Duke/Earl of Somerset</li>
<li>Dull</li>
<li>Dumain</li>
<li>Duncan</li>
<li>Earl of Cambridge</li>
<li>Earl of Douglas</li>
<li>Earl of Gloucester</li>
<li>Earl of Kent</li>
<li>Earl of Northumberland</li>
<li>Earl of Salisbury</li>
<li>Earl of Suffolk</li>
<li>Earl of Surrey</li>
<li>Earl of Warwick</li>
<li>Earl of Westmoreland</li>
<li>Earl of Worcester</li>
<li>Earl Oxford</li>
<li>Edgar</li>
<li>Edmond, Earl of Rutland</li>
<li>Edmund</li>
<li>Edmund Mortimer</li>
<li>Edmund of Langley</li>
<li>Edward Poins</li>
<li>Egeus</li>
<li>Eglamour</li>
<li>Egyptian</li>
<li>Elbow</li>
<li>Eleanor</li>
<li>Emilia</li>
<li>English Herald</li>
<li>Eros</li>
<li>Escalus</li>
<li>Escanes</li>
<li>Essex</li>
<li>Euphronius</li>
<li>Fabian</li>
<li>Fairy</li>
<li>Falstaff</li>
<li>Fang</li>
<li>Father</li>
<li>Father John Hume</li>
<li>Father's Ghost</li>
<li>Faulconbridge</li>
<li>Fenton</li>
<li>Ferdinand</li>
<li>Feste</li>
<li>Fifth Citizen</li>
<li>First Ambassador</li>
<li>First Apparition</li>
<li>First Attendant</li>
<li>First Bandit</li>
<li>First Beadle</li>
<li>First British Captain</li>
<li>First Brother</li>
<li>First Carrier</li>
<li>First Citizen</li>
<li>First Clown</li>
<li>First Commoner</li>
<li>First Conspirator</li>
<li>First Executioner</li>
<li>First Fisherman</li>
<li>First Gaoler</li>
<li>First Gentleman</li>
<li>First Goth</li>
<li>First Groom</li>
<li>First Guard</li>
<li>First Herald</li>
<li>First Huntsman</li>
<li>First Keeper</li>
<li>First Knight</li>
<li>First Lady</li>
<li>First Lord</li>
<li>First Merchant</li>
<li>First Messenger</li>
<li>First Murderer</li>
<li>First Musician</li>
<li>First Neighbour</li>
<li>First Officer</li>
<li>First Outlaw</li>
<li>First Page</li>
<li>First Petitioner</li>
<li>First Pirate</li>
<li>First Player</li>
<li>First Roman</li>
<li>First Sailor</li>
<li>First Secretary</li>
<li>First Senator</li>
<li>First Sentinel</li>
<li>First Servant</li>
<li>First Servingman</li>
<li>First Serving-Man</li>
<li>First Soldier</li>
<li>First Stranger</li>
<li>First Traveller</li>
<li>First Tribune</li>
<li>First Warder</li>
<li>First Watchman</li>
<li>First Witch</li>
<li>Flaminius</li>
<li>Flavius</li>
<li>Fleance</li>
<li>Florizel</li>
<li>Fluellen</li>
<li>Flute</li>
<li>Fool</li>
<li>Ford</li>
<li>Forester</li>
<li>Fortinbras</li>
<li>Fourth Citizen</li>
<li>Fourth Gentleman</li>
<li>Fourth Lord</li>
<li>Fourth Messenger</li>
<li>Fourth Soldier</li>
<li>Francis</li>
<li>Francis Feeble</li>
<li>Francisca</li>
<li>Francisco</li>
<li>Frederick</li>
<li>French Herald</li>
<li>French Soldier</li>
<li>Frenchman</li>
<li>Friar Francis</li>
<li>Friar John</li>
<li>Friar Laurence</li>
<li>Friar Peter</li>
<li>Friar Thomas</li>
<li>Froth</li>
<li>Gadshill</li>
<li>Gallus</li>
<li>Gaoler</li>
<li>Gardener</li>
<li>Gardiner</li>
<li>Garter</li>
<li>General</li>
<li>Gentleman</li>
<li>Gentlemen</li>
<li>Gentlewoman</li>
<li>George Bevis</li>
<li>George Plantagenet (Duke of Clarence)</li>
<li>Gertrude</li>
<li>Girl</li>
<li>Glendower</li>
<li>Goneril</li>
<li>Gonzalo</li>
<li>Governor of Harfleur</li>
<li>Gower</li>
<li>Grandpre</li>
<li>Gratiano</li>
<li>Green</li>
<li>Gregory</li>
<li>Gremio</li>
<li>Griffith</li>
<li>Groom</li>
<li>Grumio</li>
<li>Guard</li>
<li>Guiderius</li>
<li>Guildenstern</li>
<li>Haberdasher</li>
<li>Hamlet</li>
<li>Harcourt</li>
<li>Hecate</li>
<li>Hector</li>
<li>Helen</li>
<li>Helena</li>
<li>Helenus</li>
<li>Helicanus</li>
<li>Henry IV</li>
<li>Henry V</li>
<li>Henry VI</li>
<li>Henry VIII</li>
<li>Herald</li>
<li>Hermia</li>
<li>Hermione</li>
<li>Hero</li>
<li>Hippolyta</li>
<li>Holofernes</li>
<li>Horatio</li>
<li>Hortensio</li>
<li>Hortensius</li>
<li>Host</li>
<li>Hostess</li>
<li>Hostess Quickly</li>
<li>Hotspur (Henry Percy)</li>
<li>Hubert de Burgh</li>
<li>Huntsman</li>
<li>Hymen</li>
<li>Iachimo</li>
<li>Iago</li>
<li>Imogen</li>
<li>Iras</li>
<li>Iris</li>
<li>Isabella</li>
<li>Jack Cade</li>
<li>James Gurney</li>
<li>Jamy</li>
<li>Jaquenetta</li>
<li>Jaques (lord)</li>
<li>Jaques (son)</li>
<li>Jessica</li>
<li>Jeweller</li>
<li>Joan la Pucelle</li>
<li>John Holland</li>
<li>John Morton</li>
<li>John of Gaunt</li>
<li>John Talbot</li>
<li>Joseph</li>
<li>Julia</li>
<li>Juliet</li>
<li>Junius Brutus</li>
<li>Juno</li>
<li>Jupiter</li>
<li>Justice</li>
<li>Katharine</li>
<li>Katherina</li>
<li>Keeper</li>
<li>King Edward IV (Plantagenet)</li>
<li>King John</li>
<li>King Lewis XI</li>
<li>King of France</li>
<li>King Phillip</li>
<li>King Richard II</li>
<li>Knight</li>
<li>Knights</li>
<li>Lady</li>
<li>Lady Anne</li>
<li>Lady Capulet</li>
<li>Lady Faulconbridge</li>
<li>Lady Macbeth</li>
<li>Lady Macduff</li>
<li>Lady Montague</li>
<li>Lady Northumberland</li>
<li>Lady Percy</li>
<li>Laertes</li>
<li>Lafeu</li>
<li>Launce</li>
<li>Launcelot Gobbo</li>
<li>Lavinia</li>
<li>Lawyer</li>
<li>Le Beau</li>
<li>Lear</li>
<li>Legate</li>
<li>Lennox</li>
<li>Leonardo</li>
<li>Leonato</li>
<li>Leonine</li>
<li>Leontes</li>
<li>Lepidus</li>
<li>Lewis</li>
<li>Lewis the Dauphin</li>
<li>Lieutenant</li>
<li>Ligarius</li>
<li>Lodovico</li>
<li>Longaville</li>
<li>Lord</li>
<li>Lord (Earl) Rivers</li>
<li>Lord Abergavenny</li>
<li>Lord Bardolph</li>
<li>Lord Berkeley</li>
<li>Lord Bigot</li>
<li>Lord Chamberlain</li>
<li>Lord Chancellor</li>
<li>Lord Chief Justice</li>
<li>Lord Clifford</li>
<li>Lord Fitzwater</li>
<li>Lord Grey</li>
<li>Lord Hastings</li>
<li>Lord Lovel</li>
<li>Lord Marshal</li>
<li>Lord Mayor of London</li>
<li>Lord Mowbray</li>
<li>Lord Ross</li>
<li>Lord Sands</li>
<li>Lord Say</li>
<li>Lord Scales</li>
<li>Lord Scroop</li>
<li>Lord Talbot/Earl of Shrewsbury</li>
<li>Lord Willoughby</li>
<li>Lords</li>
<li>Lorenzo</li>
<li>Luce</li>
<li>Lucentio</li>
<li>Lucetta</li>
<li>Luciana</li>
<li>Lucilius</li>
<li>Lucio</li>
<li>Lucius</li>
<li>Lucullus</li>
<li>Lychorida</li>
<li>Lymoges</li>
<li>Lysander</li>
<li>Lysimachus</li>
<li>Macbeth</li>
<li>Macduff</li>
<li>Macmorris</li>
<li>Malcolm</li>
<li>Malvolio</li>
<li>Mamillius</li>
<li>Man</li>
<li>Marcellus</li>
<li>Marcus Andronicus</li>
<li>Mardian</li>
<li>Margarelon</li>
<li>Margaret</li>
<li>Margaret Jourdain</li>
<li>Maria</li>
<li>Mariana</li>
<li>Marina</li>
<li>Mariner</li>
<li>Mariners</li>
<li>Marquess of Montague</li>
<li>Marquis of Dorset</li>
<li>Marshal</li>
<li>Martius</li>
<li>Marullus</li>
<li>Master</li>
<li>Master-Gunner</li>
<li>Mayor of Saint Alban's</li>
<li>Mayor of York</li>
<li>Mecaenas</li>
<li>Melun</li>
<li>Menas</li>
<li>Menecrates</li>
<li>Menelaus</li>
<li>Menenius Agrippa</li>
<li>Menteith</li>
<li>Mercade</li>
<li>Merchant</li>
<li>Mercutio</li>
<li>Messala</li>
<li>Messenger</li>
<li>Metellus Cimber</li>
<li>Michael</li>
<li>Miranda</li>
<li>Mistress Ford</li>
<li>Mistress Overdone</li>
<li>Mistress Page</li>
<li>Montague</li>
<li>Montano</li>
<li>Montjoy</li>
<li>Mopsa</li>
<li>Mortimer</li>
<li>Morton</li>
<li>Moth</li>
<li>Mother</li>
<li>Mustardseed</li>
<li>Mutius</li>
<li>Myrmidons</li>
<li>Nathaniel</li>
<li>Nerissa</li>
<li>Nestor</li>
<li>Nicholas</li>
<li>Nobleman</li>
<li>Norwegian Captain</li>
<li>Nurse</li>
<li>Nym</li>
<li>Oberon</li>
<li>Octavia</li>
<li>Octavius</li>
<li>Officer</li>
<li>Old Athenian</li>
<li>Old Gobbo</li>
<li>Old Lady</li>
<li>Old Man</li>
<li>Old Shepherd</li>
<li>Oliver</li>
<li>Olivia</li>
<li>Ophelia</li>
<li>Orlando</li>
<li>Orsino</li>
<li>Osric</li>
<li>Ostler</li>
<li>Oswald</li>
<li>Othello</li>
<li>Outlaws</li>
<li>Page</li>
<li>Painter</li>
<li>Pandar</li>
<li>Pandarus</li>
<li>Panthino</li>
<li>Paris</li>
<li>Parolles</li>
<li>Patience</li>
<li>Patrician</li>
<li>Patroclus</li>
<li>Paulina</li>
<li>Peaseblossom</li>
<li>Pedant</li>
<li>Pembroke</li>
<li>Perdita</li>
<li>Pericles</li>
<li>Peter</li>
<li>Peter Bullcalf</li>
<li>Peter of Pomfret</li>
<li>Peto</li>
<li>Petruchio</li>
<li>Phebe</li>
<li>Philario</li>
<li>Philemon</li>
<li>Philip</li>
<li>Philip the Bastard</li>
<li>Philo</li>
<li>Philostrate</li>
<li>Philotus</li>
<li>Phrynia</li>
<li>Pinch</li>
<li>Pindarus</li>
<li>Pisanio</li>
<li>Pistol</li>
<li>Player</li>
<li>Player King</li>
<li>Player Queen</li>
<li>Players</li>
<li>Poet</li>
<li>Polixenes</li>
<li>Polonius</li>
<li>Pompey</li>
<li>Popilius</li>
<li>Porter</li>
<li>Portia</li>
<li>Post</li>
<li>Posthumus Leonatus</li>
<li>Priam</li>
<li>Priest</li>
<li>Prince Edward</li>
<li>Prince Escalus</li>
<li>Prince Henry</li>
<li>Prince Humphrey</li>
<li>Prince John</li>
<li>Prince of Arragon</li>
<li>Prince of Morocco</li>
<li>Prince Thomas</li>
<li>Princes</li>
<li>Princess of France</li>
<li>Proculeius</li>
<li>Prospero</li>
<li>Proteus</li>
<li>Provost</li>
<li>Publius</li>
<li>Puck</li>
<li>Pursuivant</li>
<li>Queen</li>
<li>Queen Elinor</li>
<li>Queen Elizabeth</li>
<li>Queen Isabel</li>
<li>Queen Katharine</li>
<li>Queen Margaret</li>
<li>Quince</li>
<li>Quintus</li>
<li>Ralph Mouldy</li>
<li>Rambures</li>
<li>Regan</li>
<li>Reignier</li>
<li>Reynaldo</li>
<li>Richard III (Duke of Gloucester)</li>
<li>Richard Plantagenet (Duke of Gloucester)</li>
<li>Richard Plantagenet the Younger</li>
<li>Richmond (Henry VII)</li>
<li>Robert Shallow</li>
<li>Robin</li>
<li>Roderigo</li>
<li>Roman</li>
<li>Roman Captain</li>
<li>Romeo</li>
<li>Rosalind</li>
<li>Rosaline</li>
<li>Rosencrantz</li>
<li>Ross</li>
<li>Rugby</li>
<li>Rumour</li>
<li>Sailor</li>
<li>Salanio</li>
<li>Salarino</li>
<li>Salerio</li>
<li>Salisbury</li>
<li>Sampson</li>
<li>Saturninus</li>
<li>Scarus</li>
<li>Scout</li>
<li>Scribe</li>
<li>Scrivener</li>
<li>Sebastian</li>
<li>Second Apparition</li>
<li>Second Attendant</li>
<li>Second Bandit</li>
<li>Second British Captain</li>
<li>Second Brother</li>
<li>Second Capulet</li>
<li>Second Carrier</li>
<li>Second Citizen</li>
<li>Second Clown</li>
<li>Second Commoner</li>
<li>Second Conspirator</li>
<li>Second Drawer</li>
<li>Second Fisherman</li>
<li>Second Gaoler</li>
<li>Second Gentleman</li>
<li>Second Goth</li>
<li>Second Groom</li>
<li>Second Guard</li>
<li>Second Herald</li>
<li>Second Huntsman</li>
<li>Second Keeper</li>
<li>Second Knight</li>
<li>Second Lady</li>
<li>Second Lord</li>
<li>Second Merchant</li>
<li>Second Messenger</li>
<li>Second Murderer</li>
<li>Second Musician</li>
<li>Second Neighbour</li>
<li>Second Officer</li>
<li>Second Outlaw</li>
<li>Second Page</li>
<li>Second Patrician</li>
<li>Second Petitioner</li>
<li>Second Pirate</li>
<li>Second Roman</li>
<li>Second Sailor</li>
<li>Second Senator</li>
<li>Second Servant</li>
<li>Second Servingman</li>
<li>Second Serving-Man</li>
<li>Second Soldier</li>
<li>Second Stranger</li>
<li>Second Warder</li>
<li>Second Watchman</li>
<li>Second Witch</li>
<li>Seleucus</li>
<li>Sempronius</li>
<li>Senator</li>
<li>Sentinels</li>
<li>Sergeant</li>
<li>Servant</li>
<li>Servant 1</li>
<li>Servant 2</li>
<li>Servant 3</li>
<li>Servants</li>
<li>Servilius</li>
<li>Serving-Men</li>
<li>Seventh Citizen</li>
<li>Several Citizens</li>
<li>Sexton</li>
<li>Seyton</li>
<li>Shakespeare</li>
<li>Shepherd</li>
<li>Sheriff</li>
<li>Sheriff of Wiltshire</li>
<li>Shylock</li>
<li>Sicilius Leonatus</li>
<li>Sicinius Velutus</li>
<li>Silence</li>
<li>Silius</li>
<li>Silvia</li>
<li>Silvius</li>
<li>Simon Shadow</li>
<li>Simonides</li>
<li>Simpcox</li>
<li>Simpcox's Wife</li>
<li>Simple</li>
<li>Sir Andrew Aguecheek</li>
<li>Sir Anthony Denny</li>
<li>Sir Henry Guildford</li>
<li>Sir Hugh Evans</li>
<li>Sir Humphrey Stafford</li>
<li>Sir James Tyrrel</li>
<li>Sir John Colville</li>
<li>Sir John Fastolfe</li>
<li>Sir John Mortimer</li>
<li>Sir John Stanley</li>
<li>Sir Michael</li>
<li>Sir Nathaniel</li>
<li>Sir Nicholas Vaux</li>
<li>Sir Oliver Martext</li>
<li>Sir Pierce of Exton</li>
<li>Sir Richard Ratcliff</li>
<li>Sir Robert Brakenbury</li>
<li>Sir Stephen Scroop</li>
<li>Sir Thomas Erpingham</li>
<li>Sir Thomas Gargrave</li>
<li>Sir Thomas Grey</li>
<li>Sir Thomas Lovell</li>
<li>Sir Thomas Vaughan</li>
<li>Sir Toby Belch</li>
<li>Sir Walter Herbert</li>
<li>Sir William Catesby</li>
<li>Sir William Glansdale</li>
<li>Sir William Lucy</li>
<li>Sir William Stanley</li>
<li>Siward</li>
<li>Sixth Citizen</li>
<li>Slender</li>
<li>Smith the Weaver</li>
<li>Snare</li>
<li>Snout</li>
<li>Snug</li>
<li>Soldier</li>
<li>Soldiers</li>
<li>Solinus</li>
<li>Some Others</li>
<li>Some Speak</li>
<li>Son</li>
<li>Soothsayer</li>
<li>Speed</li>
<li>Spirit</li>
<li>Starveling</li>
<li>Stephano</li>
<li>Steward</li>
<li>Strato</li>
<li>Surveyor</li>
<li>Tailor</li>
<li>Tamora</li>
<li>Taurus</li>
<li>Thaisa</li>
<li>Thaliard</li>
<li>Thersites</li>
<li>Theseus</li>
<li>Thieves</li>
<li>Third Apparition</li>
<li>Third Bandit</li>
<li>Third Citizen</li>
<li>Third Conspirator</li>
<li>Third Drawer</li>
<li>Third Fisherman</li>
<li>Third Gentleman</li>
<li>Third Goth</li>
<li>Third Groom</li>
<li>Third Guard</li>
<li>Third Knight</li>
<li>Third Lord</li>
<li>Third Messenger</li>
<li>Third Murderer</li>
<li>Third Musician</li>
<li>Third Neighbour</li>
<li>Third Outlaw</li>
<li>Third Pirate</li>
<li>Third Roman</li>
<li>Third Senator</li>
<li>Third Servant</li>
<li>Third Servingman</li>
<li>Third Serving-Man</li>
<li>Third Soldier</li>
<li>Third Stranger</li>
<li>Third Watchman</li>
<li>Third Witch</li>
<li>Thomas Horner</li>
<li>Thomas Mowbray</li>
<li>Thomas Rotherham</li>
<li>Thomas Wart</li>
<li>Thurio</li>
<li>Thyreus</li>
<li>Timandra</li>
<li>Time</li>
<li>Timon</li>
<li>Tintinius</li>
<li>Titania</li>
<li>Titus</li>
<li>Titus Andronicus</li>
<li>Titus Lartius</li>
<li>Touchstone</li>
<li>Townsman</li>
<li>Tranio</li>
<li>Travellers</li>
<li>Travers</li>
<li>Trebonius</li>
<li>Tribunes</li>
<li>Trinculo</li>
<li>Troilus</li>
<li>Tubal</li>
<li>Tullus Aufidius</li>
<li>Tutor of Rutland</li>
<li>Tybalt</li>
<li>Tyrian Sailor</li>
<li>Ulysses</li>
<li>Ursula</li>
<li>Valentine</li>
<li>Valeria</li>
<li>Varrius</li>
<li>Varro</li>
<li>Vaux</li>
<li>Ventidius</li>
<li>Verges</li>
<li>Vernon</li>
<li>Vincentio</li>
<li>Vintner</li>
<li>Viola</li>
<li>Virgilia</li>
<li>Volsce</li>
<li>Voltemand</li>
<li>Volumnia</li>
<li>Volumnius</li>
<li>Walter Whitmore</li>
<li>Watch</li>
<li>Watchman</li>
<li>Widow</li>
<li>William</li>
<li>William Page</li>
<li>William Stafford</li>
<li>Williams</li>
<li>Winchester</li>
<li>Woodvile</li>
<li>Young Cato</li>
<li>Young Clifford</li>
<li>Young Coriolanus</li>
<li>Young Lucius</li>
<li>Young Siward</li>
</ul>
If I'm following, you want it to filter out the items that match the letter that you press? If so, the following should help:
When outputting your markup, include:
<li data-first-character="{strings-first-character}" ...>...</li>
When outputting your letter list, include:
<a data-character="{character}" href="#" ...>...</li>
Then, in jQuery:
jQuery(function($){
$("[data-character]").on("click", function(){
var character = $(this).data("character");
$("[data-first-character]")
.show()
.not("[data-first-character=" + character +"]")
.hide();
})
});
Here is a Codepen pen that shows the process: http://codepen.io/aklatzke/pen/oXqRmE
