Ver Mensaje Individual
  #1 (permalink)  
Antiguo 26/06/2013, 22:39
yamidvo
 
Fecha de Ingreso: junio-2012
Ubicación: colombia
Mensajes: 48
Antigüedad: 9 años, 5 meses
Puntos: 0
autocompletar con bootstrap-typeahead

De antemano digo que estoy empezando en el mundo de la programacion web, en esta ocasion quisiera hacer el efecto de autocompletado con bootstrap-typeahead.js
asi es como tengo mi html:
Código HTML:
Ver original
  1.     <title>Twitter Bootstrap Typeahead Extension Demo</title>
  2.  
  3.     <link href="css/bootstrap.css" rel="stylesheet">
  4.     <link href="css/demo.css" rel="stylesheet">  
  5.     <script src="js/mockjax.js" type="text/javascript"></script>
  6.     <script src="js/bootstrap-typeahead.js" type="text/javascript"></script>
  7.     <script src="js/demo.js" type="text/javascript"></script>
  8. </head>
  9. <body class="container">
  10.  
  11.     <div class="alert alert-block alert-success">
  12.     </div>
  13.     <div class="row">
  14.         <div class="well span4">
  15.             <input id="demo1" type="text" class="span4" placeholder="Search cities..." autocomplete="off" />
  16.         </div>
  17.  
  18. </body>
un formulario con un solo input para hacer una especie de prueba.
asi tengo el archivo demo.js:
Código Javascript:
Ver original
  1. $(function () {
  2.   $('#typeahead').typeahead({
  3.     source: function (query, process) {
  4.         $.ajax({
  5.             url:'counties.php',
  6.             type:'POST',
  7.             data:'query=' + query,
  8.             dataType:'JSON',
  9.             async:'true',
  10.             success: function (data) {
  11.               process(data);
  12.             }
  13.         });
  14.       }
  15.   });
  16. });
y asi tengo el archivo php:
Código PHP:
<?php
    
if(isset($_POST('query'))){
        
//conectando a la base de datos
        
$conectar=mysql_connect("localhost""root""");
        
mysql_select_db("odontologia");
        if(
$conectar){
            
mysql_select_db("odontologia",$conexion);
        echo 
"conexion exitosa";
        }
        
        
//query
        
$query$_POST['query'];
        
//consulta a la db
        
$sql=mysql_query("SELECT * from usuarios WHERE nombre LIKE '%{$query}%'");
        
$array= array();
        while (
$row mysql_fetch_assoc($sql)) {
            
$array[] = $row('nombre');
            
            
//return the array
            
echo json_encode($array);
        }
    }
    
?>
Pense que todo estaba en orden pero no funciona.
si cambio el archivo demo.js y pongo esto:
Código Javascript:
Ver original
  1. $(function () {
  2.  
  3.     $('#demo1').typeahead({
  4.         source: [
  5.             { id: 1, name: 'Toronto' },
  6.             { id: 2, name: 'Montreal' },
  7.             { id: 3, name: 'New York' },
  8.             { id: 4, name: 'Buffalo' },
  9.             { id: 5, name: 'Boston' },
  10.             { id: 6, name: 'Columbus' },
  11.             { id: 7, name: 'Dallas' },
  12.             { id: 8, name: 'Vancouver' },
  13.             { id: 9, name: 'Seattle' },
  14.             { id: 10, name: 'Los Angeles' }
  15.         ],
  16.         itemSelected: displayResult
  17.     });
enseguida funciona, me imagino que el error esta en la llamada al archivo php pero no encuentro el problema, de antemano gracias por los comentarios.