To make a system that looks for items in the system's internal database, and in API's like Youtube. The search should return videos (youtube) and data (internal database). The Youtube API is in JavaScript, and when I click Search, it only returns youtube videos. If I comment on the JavaScript there, I will return the internal data.
The idea is to return the two by clicking on search.
Follow the YouTube JS code:
$(function() {
$("form").on("submit", function(e) {
e.preventDefault();
var request = gapi.client.youtube.search.list({
part: "snippet",
type: "video",
q: encodeURIComponent($("#search").val()).replace(/%20/g, "+"),
maxResults: 3,
order: "viewCount",
publishedAfter: "2015-01-01T00:00:00Z"
});
request.execute(function(response) {
var results = response.result;
$("#results").html("");
$.each(results.items, function(index, item) {
$.get("?search_box=", function(data) {
var string = "<div class='item'>"+
"<h2>" + item.snippet.title + "</h2>" +
"<iframe class='video w100' width='640' height='360' src='https://www.youtube.com/embed/" + item.id.videoId + "' frameborder='0' allowfullscreen></iframe>"
"</div>";
$("#results").append(string);
});
});
resetVideoHeight();
});
});
$(window).on("resize", resetVideoHeight);
});
function resetVideoHeight() {
$(".video").css("height", $("#results").width() * 9/16);
}
function init() {
gapi.client.setApiKey("---");
gapi.client.load("youtube", "v3", function() {
});
}
Here is my view.py that does the internal data search:
def home(request):
noticias = Noticia.objects.all()
tags = request.GET.get('search_box')
# import ipdb; ipdb.set_trace()
tags = tags.split(',')
if tags:
noticias = noticias.filter(tags__name__in=tags)
context = {'noticias': noticias}
return render(request, 'busca/index.html', context)
The result of both has to appear on the same page, and with only one search field:
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form action=".">
<p><input type="text" id="search" placeholder="Type something..." autocomplete="on" class="form-control" /></p>
<p><input type="submit" value="Search" class="form-control btn btn-primary w100"></p>
</form>
<div id="results">
<table class="table">
<tbody>
{% for noticia in noticias %}
<tr>
<td>{{ noticia.titulo }}</td>
</tr>
{% endfor %}
{{ response }}
</tbody>
</table>