{% extends "layout/default.html" %} {% block body %}

<div class="card-panel grey lighten-3">
	<h1>Wiki</h1>

	<form method="post">
		<input type="text" class="searchbox" value="Recherche ..." onblur="if(this.value == '') { this.value = 'Recherche ...'; }" onfocus="if(this.value == 'Recherche ...') { this.value = ''; }" name="search">
		<button type="submit">Submit</button>
	</form>



	<div class="results">
		<h3>Results</h3>

		<div class="summary well">
			<br>

			<h4>
          <span class="title"> {{head}}</span>
        </h4>

			<p class="summary">{{summary}}</p>
			<br>
			<p class="url">Voir tout l'article sur : <a href="{{url}}">{{url}}</a></p>



		</div>
	</div>
</div>




{% endblock %} {% block script %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript">
	$(".searchbox").autocomplete({
		source: function(request, response) {
			console.log(request.term);
			$.ajax({
				url: "http://fr.wikipedia.org/w/api.php",
				dataType: "jsonp",
				data: {
					'action': "opensearch",
					'format': "json",
					'search': request.term
				},
				success: function(data) {
					response(data[1]);
				}
			});
		}
	});
</script>
{% endblock %}