Ajout filtrage liste parlementaires

irfm/templates/list.html.j2

@@ -6,7 +6,14 @@
       <b>Liste des {{ parlementaires|length }} parlementaires</b>
     </header>
 
-    <table class="table table-condensed table-striped sortable">
+    <article class="panel-body">
+      <div class="input-group">
+        <span class="input-group-addon" id="search-header">Filtrer les parlementaires</span>
+        <input type="search" autocomplete="off" class="form-control" id="search" placeholder="Nom, groupe, circonscription..." aria-describedby="search-header">
+      </div>
+    </article>
+
+    <table class="table table-condensed table-striped sortable searchable">
       <thead>
         <tr>
           <th colspan="2" data-defaultsort="asc" data-mainsort="1">Parlementaire</th>
@@ -21,6 +28,7 @@
           <tr>
             <td>
               <img class="chamber-icon" src="{{ url_for('static', filename=parl.chambre|lower+'.png') }}">
+              <span class="search-vector">{{ parl.nom }} {{ parl.prenom }} {{ parl.nom_circo }} {{ parl.num_deptmt }} {{ parl.groupe_sigle }} {{ parl.groupe }}</span>
             </td>
             <td data-value="{{ parl.nom }} {{ parl.prenom }}">{{ parl.prenom }} {{ parl.nom }}</td>
             <td>{{ parl.groupe_sigle }}</td>
@@ -44,10 +52,28 @@
 
 {% block header %}
   <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap-sortable.css') }}">
+
+  <style>
+    .search-vector { display: none; }
+  </style>
 {% endblock %}
 
 {% block scripts %}
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
   <script src="{{ url_for('static', filename='moment.min.js') }}"></script>
   <script src="{{ url_for('static', filename='bootstrap-sortable.js') }}"></script>
+
+  <script>
+    $(document).ready(function () {
+      (function ($) {
+        $('#search').keyup(function () {
+          var rex = new RegExp($(this).val(), 'i');
+          $('.searchable tbody tr').hide();
+          $('.searchable tbody tr').filter(function () {
+            return rex.test($(this).find('.search-vector').text());
+          }).show();
+        });
+      }(jQuery));
+    });
+  </script>
 {% endblock %}