entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

Tomar valor de buscador con AJAX

Encontre un codigo que sirve para autocompletar un texto que es el siguiente:
enter image description here

Todo funciona bien pero al momento de registrar no me da el texto que selecione

    $(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
    $.ajax({
    type: "POST",
    url: "search.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
    $("#result").html(html).show();
    }
    });
}return false;
});

jQuery("#result").live("click",function(e){
    var $clicked = $(e.target);
    var $name = $clicked.find('.name').html();
    var decoded = $("<div/>").html($name).text();
    $('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) {
    var $clicked = $(e.target);
    if (! $clicked.hasClass("search")){
    jQuery("#result").fadeOut();
    }
});
$('#searchid').click(function(){
    jQuery("#result").fadeIn();
});
});

si me pudieran ayudar con ese codigo me ayudarian mucho, yo no se jquery :s de antemano gracias

0voto

carlossevi comentado

Necesitaríamos también el código HTML del formulario para verificar si hay un problema con los id y las clases del código JS, ya que tiene toda la pinta de ser ese el problema.

1voto

romancoronadoa comentado

<h1>Codigo donde del formulario final</h1>
<?php include 'seguridad.php';
?>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="css/js/autocomplete.js"></script>
</head>
<body>
<?php include 'nav-usuario.php'; ?>
<div class="container">
<?php
$usr = "wearbyte_root";
$p3s3 = "alvaroobregon1930";
$dtb = "wearbyte_almacen";
$link = mysql_connect("localhost", $usr, $p3s3);
$conexion = mysql_connect("localhost", $usr, $p3s3);
mysql_select_db($dtb, $link) or die(mysql_error());
?>
<div class="row">
<div class="col-md-7">
<form method="post" action="entrada-rgt.php">
<div class="well">
<table class="table">
<tr>
<?php
$query="SELECT folio FROM entradas";
$resultado=mysql_query($query,$link);

                                while ($mostrar=mysql_fetch_array($resultado))
                                {
                                $folio=$mostrar['folio'];
                                }
                                if ( @$folio== " " ) //si el folio esta en 0 o vació entonces valdrá 1
                                {
                                $folio=1;
                                }else {
                                $folio++ ; // si vale por lo menos uno suma uno
                                }
                            ?>
                            <td>Folio:</td>
                            <td>
                                <input size="3" type="number" value='<?php echo $folio ?>' name="f" readonly>
                            </td>
                        </tr>
                        <tr>
                            <td>Tipo de concepto</td>
                            <td>
                                <?php
                                    // Consultar  los campos de la tabla conceptos de la base de datos
                                    $consulta_mysql='SELECT * FROM conceptos';
                                    $resultado_consulta_mysql=mysql_query($consulta_mysql,$conexion);

                                    echo "<select name='concepto' required>";
                                    while($fila=mysql_fetch_array($resultado_consulta_mysql)){
                                        echo "<option name=" . $fila['descripcion'] . ">" . $fila['descripcion']."</option>";
                                    }
                                    echo "</select>";
                                ?>
                            </td>
                        </tr>
                        <tr>
                            <td>Fecha:</td>
                            <td><input type="text" readonly value="<?php echo date("j/ n/ y - H:ia"); ?>" name="fecha"></td>
                        </tr>
                        <tr>
                            <td>Origen:</td>
                            <td>
                                <select name="origen">
                                        <option name="1">Departamento</option>
                                        <option name="2">Proveedor</option>
                                        <option name="3">Ajuste</option>
                                    </select>
                            </td>
                        </tr>
                        <tr>
                            <td>Referencia: </td>
                            <td><input name="referencia" type="text" required></td>
                        </tr>
                        <tr>
                            <td>Comentario</td>
                            <td><input type="text" name="comentario" required></td>
                        </tr>
                        <tr>
                            <td>Producto:</td>
                            <td>
                            <!--    <div class="content">-->
                            <!--        <input type="text" class="search" id="searchid" placeholder="Buscar Producto" ><br >-->
                            <!--    <div id="result">-->
                            <?php include 'complete.php'; ?>
                                </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Cantidad</td>
                            <td><input type="number" name="cantidad" required></td>
                        </tr>
                    </table>
                    <input type="submit" class="btn btn-primary">
            </div>
        </form>
        </div>
        <div class="col-md-5">
            <div class="well">
                <?php
                    $qrb = "SELECT folio FROM entradas WHERE folio = $folio";
                    $buscar = mysql_query($qrb, $conexion);
                    if (mysql_num_rows($buscar) > 0) {
                    ?>
                    <table id="lista" class="table" border="2" width="100%">
                    <tr>
                    <th>Codigo</th>
                    <th>Descripcion</th>
                    </tr>
                    <?php
                    while ($datos = mysqli_fetch_array($buscar)){
                    ?>
                    <tr>
                    <td> <?=$datos["producto"]?> </td>
                    <td> <?=$datos["cantidad"]?> </td>
                    </tr>
                    <?php
                    }
                    mysqli_free_result($buscar);
                    ?>
                    </table>
                    <?php
                    } else {
                    echo "
                        <div class='alert alert-warning'>
                            No se encontraron datos en la base
                        </div>
                    ";
                    }

                ?>
            </div>
        </div>
    </div>
    </div>
    <?php include 'footer.php'; ?>
</body>
</html>

<h1>Codigo normal que es el que me funciona normalmente en un archivo aparte</h1>
<br>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Autocomplete search using php, mysql and ajax</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
    $.ajax({
    type: "POST",
    url: "search.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
    $("#result").html(html).show();
    }
    });
}return false;
});

jQuery("#result").live("click",function(e){
    var $clicked = $(e.target);
    var $name = $clicked.find('.name').html();
    var decoded = $("<div>").html($name).text();
    $('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) {
    var $clicked = $(e.target);
    if (! $clicked.hasClass("search")){
    jQuery("#result").fadeOut();
    }
});
$('#searchid').click(function(){
    jQuery("#result").fadeIn();
});
});
</script>
<style type="text/css">
    body{
        font-family:Tahoma, Geneva, sans-serif;
        font-size:18px;
    }
    .content{
        width:900px;
        margin:0 auto;
    }
    #searchid
    {
        width:500px;
        border:solid 1px #000;
        padding:10px;
        font-size:14px;
    }
    #result
    {
        position:absolute;
        width:500px;
        padding:10px;
        display:none;
        margin-top:-1px;
        border-top:0px;
        overflow:hidden;
        border:1px #CCC solid;
        background-color: white;
    }
    .show
    {
        padding:1px; 
        border-bottom:1px #999 dashed;
        font-size:15px;
        height:30px;
    }
    .show:hover
    {
        background:#4c66a4;
        color:#FFF;
        cursor:pointer;
    }
</style>
</head>

<body>

<div class="content">
<input type="text" class="search" id="searchid" placeholder="Search for people" >    Ex:arunkumar, shanmu, vicky<br >
<div id="result">
</div>
</div>
</body>
</html>

0voto

carlossevi comentado

Con el código HTML del formulario sería suficiente, no es necesario el script PHP completo. Sin embargo en el PHP se ven cosas como:

<tr>
    <td>Producto:</td>
    <td>
    <!--    <div class="content">-->
    <!--        <input type="text" class="search" id="searchid" placeholder="Buscar Producto" ><br >-->
    <!--    <div id="result">-->
    <?php include 'complete.php'; ?>
</tr>

Así es imposible saber cómo es el HTML generado, ya que tiene comentarios e includes. ¿Puedes poner el HTML resultante?

1 Respuesta

2votos

dairon Puntos17140

Yo hace un tiempo hice este código sencillo y no muy vistoso pero me funciona vien para hacer llamadas por AJAX con javascript y lo que devuelve lo mete dentro de un div.
Código JS:

function ajax(s,i,u,a,m){       
    /*  s - cadena de this.value
        i - id de la etiqueta a modificar por la respuesta del ajax
        u - url destino en busca de una respuesta
        a - Asyncrónico o no
        m - metodo GET o POST*/
    var con;
    if (s==""){
        document.getElementById(i).innerHTML="";
        return;
    }
    if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
        con=new XMLHttpRequest();
    }else{
    // code for IE6, IE5
        con=new ActiveXObject("Microsoft.XMLHTTP");
    }
    con.onreadystatechange=function(){
        if (con.readyState==4 && con.status==200){
            document.getElementById(i).innerHTML=con.responseText;
        }
    }    
    con.open(m,u,a);
    con.send(); 
}

HTML:

<h3>Idiomas</h3>
<div id="idiomas"></div>
<script>
ajax("1","idioma","../ajax/idiomas/getidiomas",true,"GET");
</script>

y dentro del metodo getidiomas lo que hago es llamar a la base de datos y llenar un <select> con todas las opciones y values espero que te sirva el ejemplo y puedas modelarlo a tu gusto.
Saludos Dairon

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta