jueves, 8 de enero de 2015

Curso de jQuery Mobile 10 - Listview filtro de búsqueda con PHP y jQuery




En esta ocasión continuamos con el elemento listview y veremos un ejemplo de como filtrar la búsqueda de la lista de opciones y procesar la opción seleccionada por el usuario con PHP y jQuery.

Código del capítulo. listview-avanzado.php ...


<?php 
$mensaje = null;
if (isset($_POST["lenguaje"]))
{
 $lenguaje = $_POST["lenguaje"];
 $mensaje = "<h1>Bien, tu lenguaje de programación preferido es ... $lenguaje</h1>";
}
?>

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Listview avanzado - filtro de búsqueda</title>
 <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.4.5.css">
 <script src="jquery.mobile/jquery.js"></script>
 <script src="jquery.mobile/jquery.mobile-1.4.5.js"></script>
</head>
<body>
 <div data-role="page" data-theme="a">
  <div data-role="header">
   <h1>Listview avanzado - filtro de búsqueda</h1>
  </div>
 
  <div data-role="main">
   <div class="ui-content">
   
   <?php echo $mensaje ?>
   
   <script>
    $(function(){
     $("#listview li").on("click", function(){
     var lenguaje = $(this).text();
     $("#lenguaje").val(lenguaje);
     $("#form-listview").submit();
     });
    });
   </script>
   
    <p><h3>Selecciona tu lenguaje de programación preferido</h3></p>
    <div>
    <form method="post" id="form-listview">
     <input type="hidden" id="lenguaje" name="lenguaje">
    </form>
    <ul id="listview" data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true">
     <li><a href="#">CSS</a></li>
     <li><a href="#">Java</a></li>
     <li><a href="#">Javascript</a></li>
     <li><a href="#">PHP</a></li>
     <li><a href="#">Perl</a></li>
     <li><a href="#">Python</a></li>
     <li><a href="#">Ruby</a></li>
    </ul>
    </div>
    
   </div>
  </div>
 
  <div data-role="footer">
   <div class="ui-content">
    <small>© Tutorial jQuery Mobile</small>
      </div>
     </div>
   </div>
</body>
</html>


Tutorial completo de jQuery Mobile en Youtube