{% 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" class="btn {{buttonColor}}">Envoyer</button>
            </form> 

    </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) {
        $.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 %}