[webpack.teacher.view] real-time search with 'instant-search' by: lastName + firstName

webpack/component/teacher/view.vue

@@ -2,14 +2,20 @@
 
 	<div id='CONTAINER'>
 
-		<input class='card instant-search neutral' type='text' placeholder='Recherche instantannée'>
+		<input class='card instant-search neutral' type='text' @keyup='gstore.is_handler($event)' placeholder='Recherche instantannée' id='teacher_view_instant_search'>
 
 		<div class='card container'>
 
 
 			<section v-if='gstore.professors.length <= 0'>Aucun enseignant trouvé</section>
 
-			<section v-for='prof in gstore.professors' :data-id='prof.idProfesseur'>
+			<section v-for='prof in gstore.professors'
+				:data-visible='prof.visible'
+				:data-id='prof.idProfesseur'
+				:data-category='prof.idCat'
+				:data-lname='prof.lastName'
+				:data-fname='prof.firstName'>
+
 				<span class='category'>{{ prof.categorie }}</span>
 				<h1>{{ prof.firstName }} {{ prof.lastName }}</h1>
 

webpack/data/teacher.js

@@ -14,5 +14,58 @@ api.call('GET professor/1/', { vh: true }, function(rs){
 	console.log(rs);
 	gstore.get.professors = rs.professors;
 
+});
+
+
+
+/* (2) Manage Instant Search (IS)
+---------------------------------------------------------*/
+/* (1) Define global timeout index */
+gstore.add('is_to', null);
+
+
+/* (2) Define search value buffer */
+gstore.add('is_buf', null);
+
+
+/* (3) Define instant search function */
+gstore.add('is_handler', function(e){
+
+	/* (1) Remove last timeout */
+	if( gstore.get.is_to != null )
+		clearTimeout(gstore.get.is_to);
+
+	/* (2) Store value in buffer */
+	gstore.get.is_buf = e.target.value.trim().toLowerCase();
+
+	/* (3) Launch timeout (wait 1s) before filtering */
+	gstore.get.is_to = setTimeout(function(){
+
+		// 1. Fetch elements
+		var local_ptr = gstore.get.professors;
+		var l         = gstore.get.professors.length;
+
+		// 2. For each element
+		for( var e = 0 ; e < l ; e++ ){
+
+			// 2.1. De-activate by default
+			var element = document.querySelector('section[data-id=\''+local_ptr[e].idProfesseur+'\']');
+			if( !element ) continue;
+
+			element.className = 'hidden';
+
+			// 2.2. Extract name components
+			var fname = local_ptr[e].firstName.trim().toLowerCase();
+			var lname = local_ptr[e].lastName.trim().toLowerCase();
+
+			// 2.3. Check if matches
+			if( gstore.get.is_buf.length == 0 || fname.search(gstore.get.is_buf) + lname.search(gstore.get.is_buf) > -2 )
+				element.className = '';
+
+		}
+
+	}, 500);
 
 });
+
+

webpack/scss/container.scss

@@ -149,6 +149,9 @@
 
 		color: $primary-color;
 
+		// hidden mode
+		&.hidden{ display: none; }
+
 		/* (2) Card generic title */
 		& > span.category{