0

¡Hola! Necesito usar la función autocomplete en "N" cantidad de inputs. Es decir, en cada input de una fila, insertar un nuevo dato y que siga repitiéndose dicha función (autocomplete).

NOTA El código que agregaré, lo tomé de ejemplo.

var availableTags = [ "ActionScript", "AppleScript", "Asp"];
var availableTagsCode = ["1", "2", "3"]; 
$( "#tags" ).autocomplete({ 
    source: availableTags,
    select: function (event, ui) {
        var index = availableTags.indexOf(ui.item.value);
        $("#tags_code").val(availableTagsCode[index]);  
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="tags" name="name">
<input id="tags_code" name="code"><br><br>
<input id="tags" name="name">
<input id="tags_code" name="code"><br><br>
<input id="tags" name="name">
<input id="tags_code" name="code"><br><br>

1
  • Bienvenido Hugo. No has dicho nada sobre lo que has intentado hasta ahora y cual es el problema concreto que se presenta. Pásate por el Centro de Ayuda y revisa el apartado sobre como realizar una buena pregunta
    – Fly
    Commented el 26 ene. 2023 a las 8:43

1 respuesta 1

0

Ese ejemplo que pones ocupa 2 librerias

  • jQuery
  • JQuery UI

Cabe mencionar que estar repitiendo las ID de los elementos HTML, esto no lo puedes hacer, los ID son únicos, SIEMPRE! Yo reemplacé los Id por class

Para seleccionar varios elementos a la vez, puedes usar el selector de jQuery por clase $(".NombreDeLaClase") esta selección funciona para todo.

Nota: En javascript puro esto no es posible y deberías hacer un for

Luego queremos enlazar un input con un segundo input, para esto al primero agregamos un atributo llamado data-target el cual indicará la id del segundo.

Dentro de la función select obtenemos el input que gatilla el evento mediante event.target luego buscamos su propiedad data-target que tiene guardad la id del segundo input. Y a este último agregamos el valor correspondiente

var availableTags = [ "ActionScript", "AppleScript", "Asp"];
var availableTagsCode = ["1", "2", "3"]; 

$( ".tags" ).autocomplete({ 
    source: availableTags,
     select: function (event, ui) {
        var index = availableTags.indexOf(ui.item.value);
        $("#" + $(event.target).attr("data-target")).val(availableTagsCode[index]);  
    }
});
<link href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>

<input class="tags" data-target="code1" name="name">
<input name="code" id="code1"><br><br>

<input class="tags"  data-target="code2"  name="name">
<input name="code" id="code2"><br><br>

<input class="tags"  data-target="code3"  name="name">
<input name="code" id="code3"><br><br>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.