{% extends "base_title.html" %}
{% load staticfiles %}

{% block page_size %}col-sm-8{% endblock %}

{% block extra_head %}
    <script src="{% static 'vendor/jquery/jquery.autocomplete-light.min.js' %}" type="text/javascript"></script>
{% endblock %}

{% block realcontent %}
    <h2>Inscription d'un nouveau membre</h2>
    <p class="help-block">Les mots contenant des caractères non alphanumériques seront ignorés</p>
    <input type="text" name="q" id="search_autocomplete" spellcheck="false"
           placeholder="Chercher un utilisateur par nom, prénom ou identifiant clipper" />
    <div id="form-placeholder"></div>
    <div class="yourlabs-autocomplete"></div>
    <script type="text/javascript">
        // On attend que la page soit prête pour executer le code
        $(document).ready(function() {
            $('input#search_autocomplete').yourlabsAutocomplete({
                url: '{% url 'cof.registration.autocomplete' %}',
                minimumCharacters: 3,
                id: 'search_autocomplete',
                choiceSelector: 'li:has(a)',
                box: $(".yourlabs-autocomplete"),
            });
            $('input#search_autocomplete').bind(
                'selectChoice',
                function(e, choice, autocomplete) {
                    autocomplete.hide();
                    link = choice.find('a:first');
                    if (link.length && link.attr('href') != undefined) {
                        $('#form-placeholder').html("").load(link.attr('href'), function() {
                            $('#form-placeholder').toggle().toggle();
                        });
                    }
                }
            );
        });
    </script>
{% endblock %}