Comment créer une liste de recherche de filtres en JavaScript

Posté Par: Windows2022tutosur: janvier 09, 2023Dans: TechPas De Commentaires

Comment créer une liste de recherche de filtres en JavaScript

Introduction

Dans ce tutoriel, nous allons créer un Comment créer une liste de recherche de filtres en JavaScript. Ce tutoriel a pour but de vous permettre de rechercher une liste avec la fonction filtre. Cela couvrira toutes les fonctions de base qui permettront de rechercher une liste. Je vais fournir un exemple de programme pour montrer le codage réel de ce tutoriel.

Ce tutoriel est simple et facile à comprendre, il suffit de suivre les instructions que j’ai fournies et vous pouvez le faire sans problème. Ce programme peut être utilisé pour n’importe quel système qui a besoin de filtrer toutes les données importantes. Je ferai de mon mieux pour vous fournir le moyen le plus simple de créer ce programme Filtrer la liste de recherche. Faisons donc le codage.

Avant de commencer :

Ceci est le lien pour le modèle que j’ai utilisé pour la conception de la mise en page https://getbootstrap.com/.

Création de l’interface

C’est ici que nous allons créer une interface simple pour notre application. Ce code ne listera que le champ de recherche. Pour le créer, copiez-le simplement et écrivez-le dans votre éditeur de texte, puis enregistrez-le sous index.html.

<!DOCTYPE html>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
	<div class="col-md-6 well">
		<h3 class="text-primary">How to Create Filter Search List in JavaScript</h3>
		<hr style="border-top:1px dotted #ccc;"/>
				<div class="input-group">
					<div class="input-group-addon"><span class="glyphicon glyphicon-search"></span></div>
					<input type="text" id="search" placeholder="Search here..." onkeyup="searchResult()" class="form-control"/>
			<ul class="list-group" id="list"></ul>

Création d’une fonction JavaScript

C’est là que se trouve la fonction principale de l’application. Ce code tentera de filtrer le résultat saisi dans la liste. Pour ce faire, copiez et écrivez simplement ce bloc de codes dans l’éditeur de texte et enregistrez-le sous script.js.

let name_list = ['Steve', 'Bruce', 'Tony', 'Rimuru', 'Millim', 'Leon', 'Takamitchy', 'Draken'];
 
displayList();
 
 
function searchResult(){
	let search = document.getElementById('search').value.toLowerCase();
	let target = document.getElementById("list");
	let list = target.getElementsByTagName('li');
	for(var i=; i < list.length; i++){
		let text = list[i].innerHTML;
		if(text.toLowerCase().indexOf(search) > -1){
			list[i].style.display = "";
		}else{
			list[i].style.display = "none";
		}
	}
}
 
function displayList(){
	name_list.sort(function(a,b){
		if(a < b){
			return -1;
		}
 
		if(a > b){
			return 1;
		}
 
		return ;
	});
 
	data = "";
 
	for(var i=; i < name_list.length; i++){
		data += "<li class="list-group-item"><a href="https://www.google.com/search?q="+name_list[i]+"">"+name_list[i]+"</a></li>";
	}
 
	document.getElementById('list').innerHTML = data;
}

Dans le code ci-dessus, nous créons simplement d’abord une variable qui gérera le tableau de la liste. Ensuite, nous créons une nouvelle méthode appelée afficherListe(), cette fonction triera les données filtrées que nous avons saisies dans notre liste affichée. Et enfin, nous allons créer une méthode appelée résultat de la recherche(). Cette fonction liera le champ de recherche et affichera une base de résultats sur le mot-clé saisi.

Sortir:

Les Comment créer une liste de recherche de filtres en JavaScript le code source que je fournis peut être téléchargé ci-dessous. Veuillez cliquer sur le bouton de téléchargement.

Voilà, nous avons créé avec succès Comment créer une liste de recherche de filtres en JavaScript. J’espère que ce tutoriel simple vous aidera à ce que vous recherchez. Pour plus de mises à jour et de tutoriels, veuillez simplement visiter ce site. Profitez du codage !

Plus de tutoriels pour le langage JavaScript

Tutoriels JavaScript

Télécharger ici