Skip to content

Instantly share code, notes, and snippets.

@tomsihap

tomsihap/index.html

Created February 4, 2019 16:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomsihap/06c9eca84068019eeeaf00f2196d818d to your computer and use it in GitHub Desktop.
Save tomsihap/06c9eca84068019eeeaf00f2196d818d to your computer and use it in GitHub Desktop.
Download ZIP
Moteur de recherche jQuery
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-12">
<input id="searchInput" class="form-control" type="text" placeholder="Recherchez un jeu...">
<div id="jeux"></div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
$(function () {
$('#searchInput').on('change paste keyup', function () {
console.log('search input a changé : ' + $(this).val());
if ($(this).val() == '') {
$('#jeux').html('');
}
/**
* Si la value est > à 3 chars, on recherche
*/
if ( $(this).val().length >= 3 ) {
$.get(
'http://localhost/MVC-course/api/jeux/search/' + $(this).val(),
false,
function (response) {
console.log(response);
$('#jeux').html('');
response.forEach(jeu => {
$('#jeux').append('<div class="card"><div class="card-body">' + jeu.jeux_id + ': ' + jeu.jeux_nom + '</div></div>');
});
},
'json'
);
}
});
});
/*
$(function() {
$.get(
'http://localhost/videoclub/api/movies/',
false,
function (res) {
$('#films').html('');
res.forEach(movie => {
var card =
'<div class="card">' +
'<div class="card-body">' +
movie.id + ': ' + movie.title +
'</div>' +
'</div>';
$('#films').append(card);
})
},
'json'
);
$.get(
'http://localhost/videoclub/api/categories/',
false,
function(res) {
res.forEach(category => {
console.log(category);
$('#selectCategories').append('<option value="'+ category.id +'">'+ category.title +'</option>');
});
},
'json'
);
$('#selectCategories').on('change', function() {
console.log('la categorie a été changée');
$.get(
'http://localhost/videoclub/api/movies/category/'+$(this).val(),
false,
function(res) {
$('#films').html('');
res.forEach(movie => {
var card =
'<div class="card">' +
'<div class="card-body">' +
movie.id + ': ' + movie.title +
'</div>' +
'</div>';
$('#films').append(card);
});
},
'json'
);
});
$('#todos-load-btn').on('click', function () {
console.log('Le bouton a été cliqué');
$.get(
'http://localhost/videoclub/api/categories',
false,
function(res) {
res.forEach(r => {
console.log(res)
var card =
'<div class="card">' +
'<div class="card-body">' +
r.id + ': ' + r.title +
'</div>' +
'</div>';
$('#todolist').append(card);
});
},
'json'
);
});
}) */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment