autocompletar con bootstrap, php y mysql

yamidvo · #1 (**permalink**) 15/07/2013, 14:37

Estoy haciendo una busqueda autocompletada con bootstrap.js, php y mysql.
este es el codigo del archivo index.html:

Código HTML:

Ver original<link rel="shortcut icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
        <link href="css/bootstrap-responsive.css"  rel="stylesheet"/>
        <link href="css/bootstrap.css" rel="stylesheet" />
    </head>
 
    <body>
        <div class="well">
            <input id="typeahead" type="text" class="span4" placeholder="Buscar pacientes..." autocomplete="off" 
        data-provide="typeahead"/>
        </div>
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <script>
            
            $(function(){
                $('#typeahead').typeahead({
                    source: function (query, process){
                        $.ajax({
                            url: 'source.php',
                            type: 'POST',
                            data: 'query=' + query,
                            dataType: 'JSON',
                            async: true,
                            success: function(data){
                                console.log(data);
                                //process(data);
                            }
                        });
                    }
                });
            });
        </script>
        </script>
 
    </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 originalsuccess: function(data){
                                console.log(data);

me aparecen en consola los campos de la base de datos, pero si lo cambio a :

Código HTML:

Ver originalsuccess: function(data){
                                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.

Sirrohan · #2 (**permalink**) 17/07/2013, 10:00

Deberías usar tambien el tag de html5 "data-value" para asignar el valor a tu "type-head".

También deberías buscar el archivo "bootstrap-typeahead.js" y agregarlo a tu archivo.

Éstas sugerencias es de acuerdo a lo que he leído y no a lo que he implementado.