Buscador

[Sidus]

Hola amigos no se si sea este el foro indicado, estoy teniendo un problemilla espero y me puedan dar sus aportes. resulta que estoy clonando inputs con jquery pero a su ves dentro de estos inputs tengo un buscador con ajax, hasta aca todo me va bien mi problema es que cuando agrego un segundo input no me funciona mi buscador les dejo mi codigo.

basicamente esto es lo que estoy clonando, en el div opciones muestro los resultados de la busqueda.

Código HTML:

<tr>
            <td>
              <div id="opciones"></div><input name="nombre[]" placeholder="Escribe el destinatario" size="50px" class="criterio" id="criterio" onkeyup="javascript:autocompletar()"/>
             </td>
            <td colspan="6">
                <select name="ccp[]">
                    <option value="0">Selecciona una opcion</option>
                    <option value="Para expediente personal">Para expediente personal</option>
                </select>
            </td>
            <td>
                <button type="button" class="btn remove_button">-</button>
            </td>
        </tr>
 

buscador.js

Código Javascript:

function autocompletar(){
    criterio = document.getElementById('criterio').value;
    url = "../directivos/busca_user.php?criterio="+criterio;
    
    completar.open("GET", url, true);
    completar.onreadystatechange=function(){
        if(completar.readyState==4){
                respuesta = completar.responseText;
                opciones = document.getElementById('opciones');
                
                //hacer visible el div opciones y cargar el contenido de respuesta de autocompletar.php
                opciones.style.display='block';
                opciones.innerHTML = respuesta;
                //para que el div opciones no se muestre si no hay texto en criterio
                if(criterio==''){
                    opciones.style.display = 'none';
                }
        }
    }
    completar.send(null);
}
 
 
function reemplazar_criterio(texto){
    document.getElementById('criterio').value=texto;
    document.getElementById('opciones').style.display='none';
}
 

busca_user.php

Código PHP:

if(isset($_GET["criterio"]) && $_GET["criterio"]!=""){
    
    $criterio = $_GET["criterio"];
    
    $sql = "select Encargado_area_dpto,Cargo_area_dpto from area_dpto where Encargado_area_dpto like '%".$criterio."%'";
    
    $query = mysql_query($sql, $conex);
    
    while($opcion=mysql_fetch_object($query)){
        $url = "javascript:reemplazar_criterio('".$opcion->Encargado_area_dpto." | ".$opcion->Cargo_area_dpto."')";
        echo '<a href="'.$url.'">'.$opcion->Encargado_area_dpto.'. .'.$opcion->Cargo_area_dpto.'</a>';
    }
    
}
 

Gracias por sus aportes

[Alexis88]

Imagino que debes de estar generando esas cajas de texto con algún bucle. Si fuera así, estarías cometiendo un error al asignar los mismos id a todos los elementos involucrados, recuerda que ese dato debe de ser único en todo el documento. Al tomar en la función el valor de la caja de texto con id 'criterio' y al tener más de una caja dicho id, solo tomará al valor de la primera de ellas.

Lo que debes de hacer es enviar el valor de cada caja de texto a la función, así no tendrás conflictos con las demás cajas pues ya estás enviando el valor.

En el evento onkeyup, debes de colocar esto: "autocompletar(this.value)".

Por cierto, el código que va dentro de los eventos como atributos de elementos HTML, ya es código JavaScript, por lo que no necesitas colocar el 'javascript:' adelante de la invocación a la función. No olvides modificar a la función 'autocompletar' para que pueda recibir correctamente el valor enviado. Tampoco olvides corregir lo de los id repetidos.

Saludos