1

Necesito tomar el valor del li seleccionado y pasarlo al input de búsqueda, pero solo recibo el primer elemento no importa cual seleccione

.haja es el class de ul y .list de los list, var hola debería tomar el elemento this al que se le hace click no?.

Solo recibo Nueva actividad.

$(".haja").click(function(){
    document.getElementById("is").value ="";
    var hola = $(".list", this).html();
    alert(hola);
      document.getElementById("is").value = hola;
      $(".haja").hide();

  });

**UPDATE **

<html lang="es" dir="ltr">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" type="text/css" href="../css/style.css">
  <link rel="stylesheet" href="../css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="shortcut icon" href="../images/utilidad/favicon.ico" />
  <!--Scripts-->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="../js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script type="text/javascript">
  $("ul li").click(function(){
    console.log($(this).html());
  });
  </script>
  <script type="text/javascript">
  function show(){
    $(".haja").show();
  }
  </script>
  <!--Fin -->
  <title>Menu Administracion CB</title>
 </head>
 <body>
 <!--El ul se crea desde buscador.js-->
 <form class="form-inline my-2 my-lg-0">
      <div class="buscador" id="bs1"></div>
      <button class="btn btn-success my-2 my-sm-0" type="submit">Buscar</button>
  </form>
  <!--El ul de prueba tampoco funciona-->
    <ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
   </ul>

  <!--SCRIPTS del ul si -->
  <script src="../js/buscador.js"></script>
  <script src="../js/app.js"></script>
 </body>
</html>

El codigo que se crea el ul desde buscador.js es el siguiente

  'use strict';

class Search {

constructor(obj) {
    this.el = document.querySelector(obj.el);
    this.list = obj.list;
    this.init();
}

init() {
    let input, listContainer;
    this.el.innerHTML = `
        <input placeholder="Buscar aqui" onclick="show();" type="search" id="is" class="input form-control mr-sm-2"/>
        <ul class="is-visible list-group haja" id="searchList"></ul>
    `;
    input = document.querySelector('.input');
    listContainer = document.querySelector('#searchList');
    this.watch(input, this.list, listContainer);
}

watch(input, list, search) {
    input.addEventListener('keyup', () => {
        search.innerHTML = '';
        let value = input.value.toLowerCase(),
            listT = list.length,
            existe = 0;

        for (let i = 0; i < listT; i++) {
            let text = list[i].toLowerCase();
            if (value != '') {
                existe = ~text.indexOf(value);
                if (existe != 0) {
                    this.updateList(search, list[i]);
                }
            }
        }
    }, false);
}

updateList(el, text) {
    el.innerHTML += `<li class="list">${text}</li>`;
}


}
1
  • Sebastian, por favor edita tu pregunta y pega tu código en lugar de poner una imagen. Tu pregunta tendrá mejor aceptación si sigues las reglas de la comunidad.
    – DjCrazy
    el 5 jul. 2019 a las 18:26

2 respuestas 2

4

Para capturar el contenido de un elemento usando $(this) debes asignar el evento click directamente a los elementos con los que se va a hacer la interacción y no a su elemento padre.

Ahora como recomendación, si estás usando jQuery entonces úsalo el mayor número de veces que sea posible document.getElementById("is").value es JavaScript nativo y pudiste resumir esa línea usando el selector de Jquery.

$('ul li').click(function(){
  console.log($(this).html());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

8
  • que error puedo tener si a pesar de que tengo el mismo codigo que explicaste no realiza el console.log? mi estructura es jquery body ul script /body. tampoco me funciona la solucion del compañero de mas abajo el 5 jul. 2019 a las 18:45
  • @SebastianGutierrez si no te funciona el log puede ser que el selector lo estas haciendo mal, necesitaría ver más de tu código el 5 jul. 2019 a las 18:47
  • probe lo mismo $('ul li').click(function(){ console.log($(this).html()); }); (ya que por el momento es el unico ul que maneja la pagina) tambie lo reemplaze por ul .list pero tampoco dio resultados el 5 jul. 2019 a las 19:12
  • @SebastianGutierrez en este caso necesitare más información, actualiza tu pregunta con el código escrito por favor y no en imagen y dime, ¿Usas alguna librería de listas? el 5 jul. 2019 a las 19:13
  • @SebastianGutierrez hay algo que no entiendo, si con tu código funcionaba por que no funciona con el mio si realmente lo único que cambia es la lógica de la función? utiliza entonces los selectores que tenías antes pero siguiendo la lógica mia el 5 jul. 2019 a las 19:28
0

De acuerdo a tu código debería funcionar así:

let $myInput = $('#is')

$('#searchList li').click(function(){
  $myInput.val($(this).html())
})

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.