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>