Formulaire de recherche instantanée en nodeJS

Aujourd’hui au travail je suis resté collé sur un problème sur NodeJs, comment afficher des résultats via requêtes Ajax suite à la saisie d’une recherche dans un formulaire ?

Les éléments en gras sont tous les noms que je donne arbitraitrement, ceux soulignés sont de la syntaxe JS…

Sans pouvoir illustrer la totalité du projet (tentaculaire) je dois retenir quelques pistes :

$("selecteur_input").keyup(function() {
	if (window.timerSearch) {
		window.clearTimeout(window.timerSearch);
		window.timerSearch = null;
	}
	window.timerSearch = window.setTimeout(function() { searchdocuments(); }, 300);
});

Cette fonction-là pour attendre 3ms après l’appui de la dernière touche dans le cadre de recherche; si une autre touche est appuyée le timer est réinitialisé; une fois que l’attente est terminée on exécute la fonction qui va chercher. Du JS côté front, directement dans notre template concerné.

function searchdocuments() {
	$.ajax({
		method: "GET",
		url: "route à exécuter pour la recherche",
		data: { nom_variable_saisie: $("selecteur_input").val()}
	})
		.done(function(data) {
			displayDocs(data.nom_variable_resultat);
		})
		.fail(function(jqXHR, textStatus, error) {
			// getDirectory(0);
		});
}

Cette fonction-là pour déclencher une requête Ajax qui va aller chercher les données demandées en BDD par le biais du contrôleur associé à cette route… Pareil cela se fait en front dans notre template. La fonction displayDocs prend en charge l’affichage du résultat en front, donc elle devra contenir du HTML ainsi que les variables correspondant à nos données récupérées.

"GET route à exécuter pour la recherche": {
	controller: "chemin du contrôleur",
	action: "documentsearch"
},

Ici on dit quelle procédure de quel contrôleur doit être exécuté. Se trouve dans le fichier des routes.

async documentsearch(req, res) {
	let found_docs = await Documents.find("do_name_fr LIKE ?", ["%" + req.query.text + "%"]).exec();
	res.send({ found_docs: found_docs });
}

La procédure doit bien être asynchrone pour être exécutée en Ajax. Ici un peu particulier car on utilise le framework de mon mentor, donc le Documents.find correspond à la table Documents et à la méthode find. Avec Express on procèderait différemment… Dans mon res.send je formate correctement : nom de ma variable envoyée au template; puis contenu sollicité, ici la variable créée au-dessus… La procédure se trouve dans mon contrôleur.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *