autocompletar con bootstrap-typeahead

yamidvo · #1 (**permalink**) 26/06/2013, 22:39

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<head>
    <title>Twitter Bootstrap Typeahead Extension Demo</title>
 
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/demo.css" rel="stylesheet">  
    <script src="js/mockjax.js" type="text/javascript"></script>
    <script src="js/bootstrap-typeahead.js" type="text/javascript"></script>
    <script src="js/demo.js" type="text/javascript"></script>
</head>
<body class="container">
 
    <div class="alert alert-block alert-success">
    </div>
    <div class="row">
        <div class="well span4">
            <input id="demo1" type="text" class="span4" placeholder="Search cities..." autocomplete="off" />
        </div>
 
</body>

un formulario con un solo input para hacer una especie de prueba.
asi tengo el archivo demo.js:

Código Javascript:

Ver original$(function () {
  $('#typeahead').typeahead({
    source: function (query, process) {
        $.ajax({
            url:'counties.php', 
            type:'POST',
            data:'query=' + query,
            dataType:'JSON',
            async:'true',
            success: function (data) {
              process(data);
            }
        });
      }
  });
});

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$(function () {
 
    $('#demo1').typeahead({
        source: [
            { id: 1, name: 'Toronto' },
            { id: 2, name: 'Montreal' },
            { id: 3, name: 'New York' },
            { id: 4, name: 'Buffalo' },
            { id: 5, name: 'Boston' },
            { id: 6, name: 'Columbus' },
            { id: 7, name: 'Dallas' },
            { id: 8, name: 'Vancouver' },
            { id: 9, name: 'Seattle' },
            { id: 10, name: 'Los Angeles' }
        ],
        itemSelected: displayResult
    });

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.

mimis_grande20 · #2 (**permalink**) 27/06/2013, 13:23

mira a decir verdad creo que de programacion se menos que tu pero yo tambien intento completar un campo mira lo e realizado para autocompletar un solo campo siguiendo este ejemplo, [URL="http://phpcoderzone.blogspot.mx/2012/11/auto-complete-text-box- with-php-jquery.html"]http://phpcoderzone.blogspot.mx/2012/11/auto-complete-text-box-[/URL]

pero en estos otros me apoye...

http://jqueryui.com/autocomplete/

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

http://www.larepaweb.com.ar/2013/05/busqueda-con-

autocompletar-usando-jquery-bassistance-php-y-mysql/

mmm bueno creo que tu me puedes ayudar a mi yo quiero que despues de que selecciones el primer input, se llene otro cuyo valor depende del primero y esta en la bd me ayudas