Champ de recherche avec balises

Version imprimable

25/05/2020, 10h05
dmendi

1 pièce(s) jointe(s)

Champ de recherche avec balises

Bonjour,

Je suis actuellement en train de réaliser une fonction de recherche dans un tableau HTML classique. J'ai déjà un champ de recherche simple mais j'aimerai faire évoluer celui-ci de la manière suivante : que l'on puisse saisir un mot de recherche dans une zone de texte puis faire entré pour que le mot soit pris en compte et ajouté sous forme de balise (voir capture). Il serait possible d'ajouter autant de mots clés que nécessaires avec la possibilité de les supprimer à l'aide d'une petite croix.

Pièce jointe 567812

Je n'ai pas réussi à trouver un meilleur exemple que celui du site de Hardware.

Si vous avez des idées sur comment réaliser ceci ainsi que d'autres sites proposant ce genre de fonctionnalité, je suis preneur !

En vous remerciant.

exemple (bidon parce que:
- je ne fais aucun contrôle sur la saisie
- je ne recherche rien du tout...
- j'ai bidouillé une css à l'arrache)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#c div{
	color:white;
	height:20px;
	display:inline-block;
	border:black solid 2px;
	margin-top:15px;
	margin-left:15px;
	background-color:grey;
}
#c span{
	cursor:pointer;
	vertical-align:middle;
	border:red solid 2px;
	font-weight:bold;
}

Code:

1
2
3
4
5
<div id="c">
	<input type="text" id="t" />
	<input type="button" id="search" value="recherche" />
	<br />
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
document.querySelector("#search").addEventListener("click",function(){
	let val=document.querySelector("#t").value,
	bout=document.createElement("div"),
	sp=document.createElement("span"),
	txt=document.createTextNode(val);
 
	bout.appendChild(txt);
	sp.textContent="X";
	sp.title="Effacez-moi";
	sp.addEventListener("click",function(){this.parentNode.remove()})
	bout.appendChild(sp);
	this.parentNode.appendChild(bout)
})

http://javatwist.imingo.net/searchlist.htm

25/05/2020, 13h29
dmendi

Super c'est exactement ce que je cherche, merci !