Create a search box that search between id of divs - php

Question

Well I’m kind of new in this with web programing and I’m sure I’m breaking some rules but I really need a hand here. Well the idea it’s that I have created a slider with the information that I bring from the data base, so I’m working with php and I’m making that a piece of code in php fills all the li and divs for the slider, and I’m giving the id to the div that contains all the details the name of the user of the data base, so the deal it’s that I have to have a search field that looks through all the divs I have, and after the search it only display the name of the user you are looking in the search field.
So this is the code I have of php that’s in the page, well I try to use an ajax but when the information comes from the php file it doesn’t respect the size of the div and prints all the information and I don’t get the slider.
<div class="slider" id="slider">
<?php
$cont = 0;
$bandera=0;
$tamano = 0;
$nombreUsuario = "";
$arrayIDs = array();
$i = 0;
$query_Total = "SELECT u.FOTO_HIJO_USUARIOS, u.ID_USUARIOS, u.NOMBRE_USUARIOS, u.NOMBRE_HIJO_USUARIOS, u.FB_ID_USUARIOS, m.ID_MOMENTOS_MAGICOS, m.TEXTO_MOMENTOS_MAGICOS FROM MOMENTOS_MAGICOS AS m, USUARIOS AS u WHERE u.ID_USUARIOS = m.ID_USUARIOS AND u.ESTADO_USUARIOS = '1'";
$todas_Total = mysql_query($query_Total, $MM_db) or die(mysql_error());
echo "<ul>";
while(($row = mysql_fetch_array($todas_Total, MYSQL_ASSOC))){
$nombreUsuario = $row['NOMBRE_USUARIOS'];
$arrayIDs[$i] = $nombreUsuario;
$i++;
$bandera++;
if($cont++%3==0){
echo '<li>';
}
echo '<div class="participantes" id="'.$nombreUsuario.'" style="float:left; padding-left:10px;width:145px;margin-right:25px;margin-left:15px; margin-top:15px">';
echo '<div class="face_foto"><img src="https://graph.facebook.com/'.$row['FB_ID_USUARIOS'].'/picture" width="52" height="52" /></div>';
echo '<h1 align="right">'.$nombreUsuario.'</h1>';
echo '<img class="bebe_participante" src="uploads/'.$row['FOTO_HIJO_USUARIOS'].'" width="153" height="89" />';
echo '<h2 align="center">'.$row['NOMBRE_HIJO_USUARIOS'].'</h2>';
echo '<div id="botMas"> <img class="img_votos" src="images/bt_ver_mas.png" width="89" height="35"/> </div>';
$query_Votos = "SELECT COUNT( * ) AS VOTOS FROM VOTOS WHERE ID_MOMENTOS_MAGICOS = '".$row['ID_MOMENTOS_MAGICOS']."'";
$todos_Votos = mysql_query($query_Votos, $MM_db) or die(mysql_error());
while(($row = mysql_fetch_array($todos_Votos, MYSQL_ASSOC))){
echo '<div class="votos">'.$row['VOTOS'].' VOTOS </div>';
}
echo '</div>';
$tamano++;
}
if($cont%3==0 || $cont==$bandera ){
echo '</li>';
}
echo "</ul>";
?>
</div>
So I was thinking of making the search with javascript or jquery, but after some tries I haven’t been able to make it.
So I really hope you guys can help me.
Thank you for your time :)

Answer 1

Use http://ivaynberg.github.com/select2/ for this.
See: Many-to-Many Ajax Forms (Symfony2 Forms) for an implementation (ignore the fact that this is tagged symfony2, it is relevant to php as well)