Agenda telefonica separada por letra
Estou fazendo uma agenda telefônica e a exibição separa os nomes por letra (parecido com a agenda telefônica do android - BEM PARECIDO).
Quanto à parte visual, está tranquilo. Segue meu código HTML para entenderem:
Código HTML:
<ul>
<li id=""><a name="a" class="title">A</a>
<ul>
<li><a href="#">Alex</a></li>
</ul>
</li>
<li id="b"><a name="b" class="title">B</a>
<ul>
<li><a href="#">Bruno</a></li>
</ul>
</li>
<li id="c"><a name="c" class="title">c</a>
<ul>
<li><a href="#">Carlos</a></li>
</ul>
</li>
<li id="d"><a name="d" class="title">d</a>
<ul>
<li><a href="#">Denis</a></li>
</ul>
</li>
<li id="e"><a name="e" class="title">E</a>
<ul>
<li><a href="#">Eduardo</a></li>
</ul>
</li>
<li id="f"><a name="f" class="title">f</a>
<ul>
<li><a href="#">Fernando</a></li>
</ul>
</li>
<li id="g"><a name="g" class="title">g</a>
<ul>
<li><a href="#">Gustavo</a></li>
</ul>
</li>
<li id="h"><a name="h" class="title">h</a>
<ul>
<li><a href="#">Heloisa</a></li>
</ul>
</li>
<li id="i"><a name="i" class="title">i</a>
<ul>
<li><a href="#">Igor</a></li>
</ul>
</li>
<li id="j"><a name="j" class="title">j</a>
<ul>
<li><a href="#">Joel</a></li>
</ul>
</li>
<li id="k"><a name="k" class="title">k</a>
<ul>
<li><a href="#">Karine</a></li>
</ul>
</li>
<li id="l"><a name="l" class="title">l</a>
<ul>
<li><a href="#">Leandro</a></li>
</ul>
</li>
<li id="m"><a name="m" class="title">m</a>
<ul>
<li><a href="#">Marcos</a></li>
</ul>
</li>
<li id="n"><a name="n" class="title">n</a>
<ul>
<li><a href="#">Nivaldo</a></li>
</ul>
</li>
<li id="o"><a name="o" class="title">o</a>
<ul>
<li><a href="#">Otavio</a></li>
</ul>
</li>
<li id="p"><a name="p" class="title">p</a>
<ul>
<li><a href="#">Pedro</a></li>
</ul>
</li>
<li id="q"><a name="q" class="title">q</a>
<ul>
<li><a href="#">Quezia</a></li>
</ul>
</li>
<li id="r"><a name="r" class="title">r</a>
<ul>
<li><a href="#">Renato</a></li>
</ul>
</li>
<li id="s"><a name="s" class="title">s</a>
<ul>
<li><a href="#">Sandra</a></li>
</ul>
</li>
<li id="t"><a name="t" class="title">t</a>
<ul>
<li><a href="#">Thiago</a></li>
</ul>
</li>
<li id="u"><a name="u" class="title">u</a>
<ul>
<li><a href="#">Ulisses</a></li>
</ul>
</li>
<li id="v"><a name="v" class="title">v</a>
<ul>
<li><a href="#">Victor</a></li>
</ul>
</li>
<li id="w"><a name="w" class="title">w</a>
<ul>
<li><a href="#">Wagner</a></li>
</ul>
</li>
<li id="x"><a name="x" class="title">x</a>
<ul>
<li><a href="#">Xavier</a></li>
</ul>
</li>
<li id="y"><a name="y" class="title">y</a>
<ul>
<li><a href="#">Yago</a></li>
</ul>
</li>
<li id="z"><a name="z" class="title">z</a>
<ul>
<li><a href="#">Zoroastro</a></li>
</ul>
</li>
</ul>
Como podem ver, na exibição será separado.
Após dar 1 select na tabela phonebook para pegar todos os "contatos" salvos, isso me retorna um array. Até ai tudo bem.
Agora, como manipular os dados desse array pra separar variáveis contendo os dados por letra, pra eu poder estampar cada variável no seu respectivo lugar no html?
No caso, vai ficar assim o HTML:
Código HTML:
<ul>
<li id=""><a name="a" class="title">A</a>
<ul>
{@A_LIST}
</ul>
</li>
<li id="b"><a name="b" class="title">B</a>
<ul>
{@B_LIST}
</ul>
</li>
<li id="c"><a name="c" class="title">c</a>
<ul>
{@C_LIST}
</ul>
</li>
<li id="d"><a name="d" class="title">d</a>
<ul>
{@D_LIST}
</ul>
</li>
<li id="e"><a name="e" class="title">E</a>
<ul>
{@E_LIST}
</ul>
</li>
<li id="f"><a name="f" class="title">f</a>
<ul>
{@F_LIST}
</ul>
</li>
<li id="g"><a name="g" class="title">g</a>
<ul>
{@G_LIST}
</ul>
</li>
<li id="h"><a name="h" class="title">h</a>
<ul>
{@H_LIST}
</ul>
</li>
<li id="i"><a name="i" class="title">i</a>
<ul>
{@I_LIST}
</ul>
</li>
<li id="j"><a name="j" class="title">j</a>
<ul>
{@J_LIST}
</ul>
</li>
<li id="k"><a name="k" class="title">k</a>
<ul>
{@K_LIST}
</ul>
</li>
<li id="l"><a name="l" class="title">l</a>
<ul>
{@L_LIST}
</ul>
</li>
<li id="m"><a name="m" class="title">m</a>
<ul>
{@M_LIST}
</ul>
</li>
<li id="n"><a name="n" class="title">n</a>
<ul>
{@N_LIST}
</ul>
</li>
<li id="o"><a name="o" class="title">o</a>
<ul>
{@O_LIST}
</ul>
</li>
<li id="p"><a name="p" class="title">p</a>
<ul>
{@P_LIST}
</ul>
</li>
<li id="q"><a name="q" class="title">q</a>
<ul>
{@Q_LIST}
</ul>
</li>
<li id="r"><a name="r" class="title">r</a>
<ul>
{@R_LIST}
</ul>
</li>
<li id="s"><a name="s" class="title">s</a>
<ul>
{@S_LIST}
</ul>
</li>
<li id="t"><a name="t" class="title">t</a>
<ul>
{@T_LIST}
</ul>
</li>
<li id="u"><a name="u" class="title">u</a>
<ul>
{@U_LIST}
</ul>
</li>
<li id="v"><a name="v" class="title">v</a>
<ul>
{@V_LIST}
</ul>
</li>
<li id="w"><a name="w" class="title">w</a>
<ul>
{@W_LIST}
</ul>
</li>
<li id="x"><a name="x" class="title">x</a>
<ul>
{@X_LIST}
</ul>
</li>
<li id="y"><a name="y" class="title">y</a>
<ul>
{@Y_LIST}
</ul>
</li>
<li id="z"><a name="z" class="title">z</a>
<ul>
{@Z_LIST}
</ul>
</li>
</ul>
Eu poderia fazer diversos "selects", um pra cada letra, usando a string "LIKE" na query e depois fazer um laço pra pegar os dados do fetch, mas isso deixaria o código enorme e lento (cheio de consultas), e não quero isso. Preciso fazer isso com apenas uma consulta ao sql e com esses dados, manipular e separar os valores.
Estive pensando em usar str_split pra separar no array, mas estou meio perdido.
Alguém tem alguma ideia?