Nous allons faire un moteur de recherche en HTML et JS qui ira requêter une API de films, et afficher dynamiquement les films "en direct", en fonction de ce que nous tapons dans l'input de recherche.
- Créer un fichier
index.htmlen important jQuery - Créer un fichier
app.js, en l'important dans le fichier html.
TRÈS IMPORTANT : Attention à ne PAS utiliser
jquery.slimmais bienjquery!!! Si jamais vous utilisez le code de jquery.slim dans un projet comme suit, avec l'extensionb4par exemple :
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
Il vous suffit de changer la ligne ainsi :
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
Récap des modifications:
- On supprime la portion
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"- On supprime la portion
.slimdu nom du fichier Javascript
Créez un fichier basique contenant un input#search.
Voici la liste des étapes à prévoir :
- Mettre un listener sur
input#searchde sorte à déclancher la requête lors de la saisie- Fonction du listener : lancer la requête
- Récupérer la réponse de la requête
- Afficher dans le HTML le contenu de la réponse
app.js
$(function() {
$('#search').on('input', function() {
console.log( $(this).val() );
});
});À chaque changement de valeur dans l'input, on doit voir apparaître dans la console la valeur de l'input.
On va maintenant lancer la requête Ajax au serveur fournissant l'API de films !
Nous allons utiliser l'Open Movie Database (OMDB API) http://www.omdbapi.com/
Créez un compte gratuit en cliquant sur l'onglet API Key. La clé d'API permet aux APIs de savoir quel usage est fait par qui de leurs API et de limiter l'usage (1000 requêtes gratuites par jour pour OMDB par exemple).
Conservez la clé d'API reçue par email dans une constante :
const omdbApiKey = 'abcdef';La requête Ajax (doc : https://api.jquery.com/jquery.ajax/) se compose ainsi :
$.ajax({
url : 'https://www.example.com/resource', // La ressource ciblée
type : 'GET', // Le type de la requête HTTP
data : { val1: 'hello', val2: 'hello2'},
success : function(result, status, error) {
// Fonction en cas de success de la requête
},
error : function(result, status, error) {
// Fonction en cas d'erreur
},
complete: function(result, status) {
// Fonction à executer une fois l'appel Ajax effectué (par exemple, retirer le spinner de chargement)
}
});On va adapter la requête à nos besoins :
$(function() {
$('#search').on('input', function() {
console.log( $(this).val() );
$.ajax({
url : 'https://www.example.com/resource', // La ressource ciblée
type : 'GET', // Le type de la requête HTTP
data : {
apiKey: 'VOTRE_API_KEY',
s: $(this).val()
},
success : function(result) {
// Fonction en cas de success de la requête
},
error : function(result) {
// Fonction en cas d'erreur
},
complete: function(result) {
// Fonction à executer une fois l'appel Ajax effectué (par exemple, retirer le spinner de chargement)
}
});
});
});On voit que les clés success, error, complete prennent 3 paramètres : ce sont les paramètres que rempliront la fonction Ajax.
C'est dans la fonction de success que nous allons traiter les données :
success : function(result) {
// Fonction en cas de success de la requête
console.log(result);
},À partir de ce point, le code va varier selon votre projet, selon l'API utilisée...
Il faudra comprendre le format de la réponse, grâce au console.log, afin de faire les traitements voulus : faire un foreach des données qui arrivent pour les insérer dans du HTML, faire des validations sur les données reçues...
Par exemple ici, nous allons afficher tous les films dans des Bootstrap Cards, contenus dans un div#results.
Grâce aux console.log, on comprend que les films sont dans un objet Search, on peut donc y accéder dans la fonction success grâce à result.Search.
Nous lançons la requête uniquement si l'utilsateur a tapé plus de 3 caractères, et nous n'affichons les résultats que si des résultats sont affichables (result.Search.length > 0).
success : function(response) {
// Si l'utilisateur a saisi plus de 3 caractères
if (search.val().length >= 3 ) {
// On vide la div d'affichage des résultats
$('#results').html('');
// Si le résultat nous retourne des films
if (response.Search && response.Search.length > 0) {
// On fait un foreach des films
response.Search.forEach(function (movie) {
// L'équivalent de cette boucle en PHP serait : foreach ($response['Search'] as $movie)
// On créée le HTML d'un film (une bootstrap card)
let movieHtml = '<div class="card">' +
'<div class="card-header">' + movie.Title + '</div>' +
'<div class="card-body"><img src="' + movie.Poster + '" height="100"></div>' +
'</div>';
// On l'ajoute au div de résultats
$('#results').append(movieHtml);
});
}
}
},index.html :
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!-- div.container>div.row.mt-3>div.col-12>form>input.form-control -->
<div class="container">
<div class="row mt-3">
<div class="col-12">
<input id="search" type="text" class="form-control">
<hr>
<div id="results"></div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>app.js :
$(function() {
const search = $('#search');
const omdbApiKey = 'VOTRE_API_KEY';
search.on('input', function() {
console.log( $(this).val() );
$.ajax({
url: 'http://www.omdbapi.com/',
type : 'GET',
data : {
'apikey': omdbApiKey,
's' : $(this).val()
},
success : function(result) {
if (search.val().length >= 3 ) {
$('#results').html('');
if (result.Search && result.Search.length > 0) {
// comme en PHP : foreach ($result['Search'] as $movie)
result.Search.forEach(function (movie) {
console.log(movie);
let movieHtml = '<div class="card">' +
'<div class="card-header">' + movie.Title + '</div>' +
'<div class="card-body"><img src="' + movie.Poster + '" height="100"></div>' +
'</div>';
$('#results').append(movieHtml);
});
}
}
},
// error : function(result) {
// console.log('erreur réseau !');
// },
// complete: function(result) {
// console.log('fini !');
// }
});
});
});