Discussion :

[dmendi]

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.




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.

[javatwister]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[dmendi]

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