7.A list of movie JSON data retrieved from OMDb API

En este caso vemos el uso de la función $.get(), permite hacer una llamada AJAX.

Los pasos de este ejercicio son los siguientes:

*Línea 12*
```
  Cuando se hace click en el botón Buscar, se invoca la función pasada como parámetro.
```
*Línea 14*
```
  Recupera el valor que introduce el usuario, en este caso la película que quiere buscar.
```
*Línea 15* 
```
  Comprueba que el usuario haya introducido algo (puede que se le de al botón Buscar pero el campo esté vacío)
```
*Línea 16*
```
  Invocación al método get. 
    - Se construye la url (url base + valor introducido por el usuario)
    - callback: es la función que se recibe como segundo parámetro. Esta función se ejecutará cuando esta operación devuelva resultados.
```
*Línea 17*
```
  Interior de callback: las películas recuperadas estarán en el parámetro data. Lo que hacemos es pintar los resultados llamando a la función pintaResultados()
```
*Líneas 5, 6*
```
  Dentro de la función pintaResultados(), iteramos sobre las películas y las vamos añadiendo al DOM.
```

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
  <style>
  body{
    font-family: Calibri;
  }
    input {
      width: 500px;
      padding: 8px;
    }
    .form{
      text-align: center;
    }
    .results{
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div class="form">
    <p>
      <h1>OMDb API</h1> Busca películas por nombre:
    </p>
    <p>
      <input id="busqueda" type="text" />
    </p>
    <button id="busca">Busca</button>
  </div>
  <br>
  <div class="results">
    <h2>Resultados</h2>
    <ul id="resultados">

    </ul>
  </div>
</body>

</html>

function pintaResultados(data) {
  var $ul = $('#resultados');
  $ul.empty();

  data.forEach(function(item) {
    $ul.append('<li>' + item.imdbID + ' - ' + item.Title + ' (' + item.Year + ')</li>');
  });
}

$(document).ready(function() {

  $('#busca').on('click', function() {

      var busqueda = $('#busqueda').val();
      if (busqueda.length > 0) {
        $.get('http://www.omdbapi.com/?s=' + busqueda, function(data) {
          pintaResultados(data.Search);
        });
      }
  });
});