Hacer Pregunta

Conecta

3votos

Tomar valor de buscador con AJAX

preguntó
Web
1634 Vistas
1 Respuestas
abierta

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

por romancoronadoa (970 puntos) en Web

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.

por carlossevi (63.580 puntos)

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>
por romancoronadoa (970 puntos)
editado por

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?

por carlossevi (63.580 puntos)

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 dairon (17.140 puntos)
editado por

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

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

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

Etiquetas

Categorías

Conecta