Skip to main content
2 de 3
se añadieron 1642 caracteres en el cuerpo
Jesús
  • 254
  • 2
  • 3
  • 17

Utilizar addEventListener Clcik en javascript

no tengo ni la mas minima idea de javascript, pero estuve intestigando y llegue a la conclusion de que para hacer mi buscador de php lo iba a ncesitar entonces encontre un codigo que me funciona a la perfeccion, el buscador es en tiempo real, y eso es un inconveniente para mi, porque mi buscador busca imagenes y por lo tanto se tarda demasiado en cargar, asi que mi pregunta es que si alguien sabe como agregar la condicion de que solo se ejecute la busqueda 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>
Jesús
  • 254
  • 2
  • 3
  • 17