Tema: autocompletar con bootstrap, php y mysql
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 15/07/2013, 14:37
yamidvo
 
Fecha de Ingreso: junio-2012
Ubicación: colombia
Mensajes: 48
Antigüedad: 12 años, 5 meses
Puntos: 0
Pregunta autocompletar con bootstrap, php y mysql
Estoy haciendo una busqueda autocompletada con bootstrap.js, php y mysql.
este es el codigo del archivo index.html:
Código HTML: 
Ver original
  1. <link rel="shortcut icon" href="/favicon.ico" />
  2.         <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  3.         <link href="css/bootstrap-responsive.css"  rel="stylesheet"/>
  4.         <link href="css/bootstrap.css" rel="stylesheet" />
  5.     </head>
  6.  
  7.     <body>
  8.         <div class="well">
  9.             <input id="typeahead" type="text" class="span4" placeholder="Buscar pacientes..." autocomplete="off" 
  10.         data-provide="typeahead"/>
  11.         </div>
  12.         
  13.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  14.         <script src="js/bootstrap.js"></script>
  15.         <script>
  16.             
  17.             $(function(){
  18.                 $('#typeahead').typeahead({
  19.                     source: function (query, process){
  20.                         $.ajax({
  21.                             url: 'source.php',
  22.                             type: 'POST',
  23.                             data: 'query=' + query,
  24.                             dataType: 'JSON',
  25.                             async: true,
  26.                             success: function(data){
  27.                                 console.log(data);
  28.                                 //process(data);
  29.                             }
  30.                         });
  31.                     }
  32.                 });
  33.             });
  34.         </script>
  35.         </script>
  36.  
  37.     </body>
y asi tengo el codigo de source.php:
Código PHP:
<?php

if(isset($_POST['query'])){
    $conexion = mysql_connect ("localhost", "root", "27310424");
    mysql_select_db ("bootstrap");
    
    $query= $_POST['query'];
    
    $sql= mysql_query("SELECT * from typeahead WHERE name LIKE '%{$query}%'");
    $array= array();
    
    while($row= mysql_fetch_assoc($sql)){
        $array= $row['name'];
        
        echo json_encode($array);
    }
}

?>
tengo una base de datos llamada bootstrap con una tabla llamada typeahead, esta contiene dos campos : id y name.
cuando en el script que esta en el index coloco :
Código HTML: 
Ver original
  1. success: function(data){
  2.                                 console.log(data);
me aparecen en consola los campos de la base de datos, pero si lo cambio a :
Código HTML: 
Ver original
  1. success: function(data){
  2.                                 process(data);
no aparece la busqueda autocompletada.
el ejemplo lo saque del siguiente tutorial:
http://www.youtube.com/watch?v=v0H6m...C7BB1E12FEDC02
tengo el codigo exactamente como el lo indica, pero no se que esta mal.
espero me ayuden.