0

No tengo ni la mas mínima idea de javascript, pero estuve investigando y llegue a la conclusión de que para hacer mi buscador de php lo iba a necesitar entonces encontré un código que me funciona a la perfección, el buscador es en tiempo real, y eso es un inconveniente para mi, porque mi buscador busca imágenes y por lo tanto se tarda demasiado en cargar, así que mi pregunta es que si alguien sabe como agregar la condición de que solo se ejecute la búsqueda al darle click, o que me pueda explicar más a fondo el funcionamiento de mi script.

$(document).ready(function(){
  $('#search').focus()

  $('#search').on('keyup', function(){
    var search = $('#search').val()
    $.ajax({
      type: 'POST',
      url: 'php/search.php',
      data: {'search': search},
      beforeSend: function(){
        $('#result').html('<img src="img/pacman.gif">')
      }
    })
    .done(function(resultado){
      $('#result').html(resultado)
    })
    .fail(function(){
      alert('Hubo un error :(')
    })
  })
})

----CODIGO DE MI INDEX-----

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Buscador PHP</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="estilos__buscador.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<div class="container">
  <div class="page-header text-left">
    <h1>Buscador             <small>              Registro  </small></h1>
  </div>
  <div class="row">
    <div class="col-md-3">
      <div class="input-group">
        <span class="input-group-addon"><span class="glyphicon glyphicon glyphicon-search" aria-hidden="true"></span></span>
        <input type="text" class="form-control" id="search" placeholder="BuscA">
        <input type="submit" value="realizar busqueda" id="button" name="button">
      </div>
    </div>
    <div class="col-md-3 col-md-offset-3" id="result">
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script type="text/javascript" src="js/index.js"></script>
</body>

2
  • Olvide añadir que utilizo ajax
    – Jesús
    Commented el 25 abr. 2019 a las 18:50
  • Deberias agregar tu HTML.
    – alanfcm
    Commented el 25 abr. 2019 a las 18:50

3 respuestas 3

1

Lo que necesitas es cambiar tu handler para que no escuche el evento keyup de tu input search sino que escuche el evento click en tu boton button. Quedaria asi:

$(document).ready(function(){
  $('#search').focus()

  $('#button').on('click', function(){
    var search = $('#search').val()
    $.ajax({
      type: 'POST',
      url: 'php/search.php',
      data: {'search': search},
      beforeSend: function(){
        $('#result').html('<img src="img/pacman.gif">')
      }
    })
    .done(function(resultado){
      $('#result').html(resultado)
    })
    .fail(function(){
      alert('Hubo un error :(')
    })
  })
})
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Buscador PHP</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="estilos__buscador.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<div class="container">
  <div class="page-header text-left">
    <h1>Buscador             <small>              Registro  </small></h1>
  </div>
  <div class="row">
    <div class="col-md-3">
      <div class="input-group">
        <span class="input-group-addon"><span class="glyphicon glyphicon glyphicon-search" aria-hidden="true"></span></span>
        <input type="text" class="form-control" id="search" placeholder="BuscA">
        <input type="submit" value="realizar busqueda" id="button" name="button">
      </div>
    </div>
    <div class="col-md-3 col-md-offset-3" id="result">
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script type="text/javascript" src="js/index.js"></script>
</body>

2
  • ya lo puse como me dijiste y no me funciona :(
    – Jesús
    Commented el 25 abr. 2019 a las 19:04
  • Como puedes ver aqui si funciona. Puedes intentar esto: $(document).on('click', '#button', function() {
    – alanfcm
    Commented el 25 abr. 2019 a las 19:53
1

Esto va a buscar por cada vez q levantes la tecla q tiene apretada. Es porque pusiste el keyup a tu barra de busqueda:

$('#search').on('keyup', function(){

Si quieres mantener tu manera de buscar pero que no te busque por cada vez que apretes una tecla, puedes cambiarlo por change y solo buscara cuando el valor cambie

$('#search').on('change', function(){
8
  • Si quieres que cambie cuando apretes el boton buscar, usa la respuesta de alanfcm Commented el 25 abr. 2019 a las 18:58
  • Muchas gracias :)
    – Jesús
    Commented el 25 abr. 2019 a las 19:04
  • No hay porque. Recuerda que si alguna de las respuestas soluciona tu problema, marcala como correcta. Commented el 25 abr. 2019 a las 19:07
  • Sip, pero aun no resuelvo mi duda :c, ya probe lo de alanfcm y no me funciono
    – Jesús
    Commented el 25 abr. 2019 a las 19:08
  • 1
    Gracias de antemano a todos los que me ayudaron, al ultimo el error por el que no funcionaba era porque mi archivo js esta ejecutando el cache, y lo que hice fue agregar al sourc de mi js esto (src="mi archivo.js?1")
    – Jesús
    Commented el 25 abr. 2019 a las 20:31
1

Vale, comienzo explicandote de una forma general lo que hace tu código, pero antes de ello, te aclaro que lo que estás usando no es JavaScript puro netamente, lo que estás usando es JQuery, que básicamente es una librería o extensión de JavaScript que permite acceder a los elementos del DOM y otras funcionalidades de JavaScript, pero con sintaxis más simplificada y a mi parecer, más sencilla.

  • Primeramente, $(document).ready(), lo que hace es ejecutar cualquier cosa una vez haya cargado la página por completo y sus respectivos componentes.
  • Luego $('#search').focus(), lo que hace es poner el cursor en tu caja de búsqueda
  • Con $('#search').on('keyup'), lo que haces es ejecutar alguna función una vez escribas algo en tu caja de búsqueda.
  • Con $('#search').val(), obtienes el valor de lo que estás escribiendo en tu caja de búsqueda.
  • Y por último, con $.ajax({..}), lo que haces es hacer una petición a un archivo externo, que será el que hará la interacción con la BD para obtener los datos de la consulta respecto al valor ingresado en la caja de búsqueda.

Para acceder a los elementos, es parecido a css, es decir, para acceder a las propiedades id, se usa $('#elemento'), para acceder a propiedades class, se usa $('.elemento').

Ahora, teniendo en cuenta todo esto, te dejo dos ejemplos en los que activas o ejecutas funciones con dos eventos, el keyup y el click, por ello, podrás cambiar

$('#search').on('keyup', function(){...}), 

por

$('#search').on('click', function(){...})

$(document).ready(function(){
  //Asociamos evento keyup para ejecutar función al momento de escribir
  $('#search-Keyup').on('keyup', function (){
    //Obtenemos el valor escrito
    let valorInputKeyup = $('#search-Keyup').val();
    
    //Cargamos el valor escrito en la etiqueta <p>
    $('#mostrarContenidoKeyup').text(valorInputKeyup);
    
  });
  
  //Asociamos evento click al enlace para ejecutar función al momento de clickear sobre él
  $('#search-Click').on('click', function (){
    
    //Obtenemos el valor escrito
    let valorInputClick = $('#search-ClickInput').val();
    
    //Cargamos el valor escrito a la segunda etiqueta <p>
    $('#mostrarContenidoClick').text(valorInputClick);
    
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="text" id="search-Keyup">
</div>

<div>
  <input type="text" id="search-ClickInput">
  <a id="search-Click" href="#">Haz click</a>
</div>

<br><br>

<h6>Keyup: <p id="mostrarContenidoKeyup"></p></h6>
<br>
<h6>Click: <p id="mostrarContenidoClick"></p></h6>

2
  • Muy bien explicado gracias, me sirvio mucho :D
    – Jesús
    Commented el 27 abr. 2019 a las 17:58
  • Ok @Jesús, me alegra haber contribuido en algo, y espero que haya logrado de alguna manera solucionar su problema. Commented el 29 abr. 2019 a las 13:19

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.