Discussion :

[[ZiP]]

Bonjour,

Le code suivant fonctionne mais fait l'inverse de ce que je souhaite (il cache les lignes qui contiennent le texte saisi) :

Code :

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

$("[prenoms*='" + recherche_prenoms + "']:visible").hide();

Si je mets le code suivant, il ne fonctionne pas :

Code :

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

$("[prenoms!='" + recherche_prenoms + "']:visible").hide();

Je voudrais cacher toutes les lignes qui ne contiennent pas le texte saisi.

Savez-vous pourquoi et pouvez-vous m'aider à faire fonctionner ce bout de code ?

Merci,
ZiP

[NoSmoking]

Bonjour,
il est important de bien lire la documentation fonction de son besoin !
• :not() Selector

[[ZiP]]

Bonjour,

Ce code m'efface ma page complète :

Code :

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

$(":not([prenoms!='" + recherche_prenoms + "']):visible").hide();

Celui-ci aussi :

Code :

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

$(":not([prenoms!='" + recherche_prenoms + "']:visible)").hide();

Merci pour votre aide,
ZiP

[danielhagnoul]

Je voudrais cacher toutes les lignes qui ne contiennent pas le texte saisi.

A priori, je dirais qu'il faut cacher la totalité du texte sauf le texte saisi, donc utiliser la méthode not().

Comme on ignore tout de vos codes (CSS, HTML, JS), j'en suis réduit à proposer : $( sélecteur pour la totalité du texte ).not( sélecteur du texte saisi ).hide();.

[[ZiP]]

Bonjour,

Voici mon code HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<p>
	<label for="recherche_nom">Nom :</label>
	<input value="r" autocomplete="off" id="recherche_nom" name="recherche_nom" type="text">
	<label for="recherche_prenoms">Prénom :</label>
	<input value="c" autocomplete="off" id="recherche_prenoms" name="recherche_prenoms" type="text">
	<label for="recherche_sexe">Sexe :</label>
	<select id="recherche_sexe" name="recherche_sexe">
		<option value="T">Tous</option>
		<option value="F">Féminin</option>
		<option value="M">Masculin</option>
	</select>
</p>
<select id="listing" name="listing" size="25">
	<option id="2" nom="caron" prenoms="capucine pauline justine" sexe="F">CARON Capucine Pauline Justine (1989-)</option>
	<option id="5" nom="martin" prenoms="suzanne mireille" sexe="F">MARTIN Suzanne Mireille (1934-2011)</option>
	<option id="6" nom="dupont" prenoms="robert désiré sylvain" sexe="M">DUPONT Robert Désiré Sylvain (1928-2004)</option>
	<option id="3" nom="dubois" prenoms="adélaïde martine geneviève" sexe="F">DUBOIS Adélaïde Martine Geneviève (2013-)</option>
	<option id="4" nom="dubois" prenoms="claude guy andré" sexe="M">DUBOIS Claude Guy André (1954-)</option>
	<option id="1" nom="dubois" prenoms="mathieu julien thomas" sexe="M">DUBOIS Mathieu Julien Thomas (1987-)</option>
</select>

Voici mon code JS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
$(function()
{	
	$("#recherche_nom").keyup(function()
	{
		RechercheListing();
	});
 
	$("#recherche_prenoms").keyup(function()
	{
		RechercheListing();
	});
 
	$("#recherche_sexe").change(function()
	{
		RechercheListing();
	});
});
 
function RechercheListing()
{
	var recherche_nom = $("#recherche_nom").val().toLowerCase();
	var recherche_prenoms = $("#recherche_prenoms").val().toLowerCase();
	var recherche_sexe = $("#recherche_sexe").val();
 
	$("#listing option").hide();
 
	$("[nom*='" + recherche_nom + "']").show();
 
	$("[prenoms*='" + recherche_prenoms + "']:visible").hide();
 
	if( $("#recherche_nom").val().length == 0 && $("#recherche_prenoms").val().length == 0 && $("#recherche_sexe").val() == 'T' )
	{
		$("#listing option").show();
	}
}

Merci,
ZiP

[Invité]

Bonjour,

si on prend le problème à l'envers : on affiche les options correspondantes (au lieu de masquer les options non-correspondantes) :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$(window).on('load', function() {
   RechercheListing();
 });
 $(function() {
   $("body").on('keyup change', "#recherche_nom, #recherche_prenoms, #recherche_sexe", function() {
     RechercheListing();
   });
 });
 
 function RechercheListing() {
   var recherche_nom = $("#recherche_nom").val().toLowerCase();
   var recherche_prenoms = $("#recherche_prenoms").val().toLowerCase();
   var recherche_sexe = $("#recherche_sexe").val();
 
   var recherche = '';
   if (recherche_nom != '') {
     recherche += '[nom*="' + recherche_nom + '"]';
   }
   if (recherche_prenoms != '') {
     recherche += '[prenoms*="' + recherche_prenoms + '"]';
   }
   if (recherche != '' && recherche_sexe != 'T') {
     recherche += '[sexe*="' + recherche_sexe + '"]';
   }
   // recherche ?
   if (recherche != '') {
     $("#listing option").hide(); // on masque tout
     $("#listing option" + recherche).show(); // on affiche les correspondances
   } else {
     $("#listing option").hide(); // on masque tout
   }
 }

Une simplification/concision d'écriture :

Code javascript :

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

1
2
3
4
5
6
$(function()
{	
	$("body").on('keyup change', "#recherche_nom, #recherche_prenoms, #recherche_sexe", function(){
		RechercheListing();
	});
});

On peut remplacer $("body"). par $("#id_du_formulaire").

Voir : http://codepen.io/jreaux62/pen/vLPyOX

Bonus : remplissage des input depuis le select

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
// remplissage des input depuis le select
$(function() {
   $("body").on('click change', "#listing", function() {
    var nom = $('#listing option:selected').attr('nom');
    var prenoms = $('#listing option:selected').attr('prenoms');
    var sexe = $('#listing option:selected').attr('sexe');
     $("#recherche_nom").val( nom );
     $("#recherche_prenoms").val( prenoms );
     $("#recherche_sexe").val( sexe );
   });
 });

Remarque : pour forcer l'affichage en Majuscule (tout majuscule pour le nom, 1ères pour les prénoms) :

Code html :

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

1
2
3
	<input value="" autocomplete="off" id="recherche_nom" name="recherche_nom" type="text" style="text-transform:uppercase;">
...
	<input value="" autocomplete="off" id="recherche_prenoms" name="recherche_prenoms" type="text" style="text-transform:capitalize;">

[[ZiP]]

Bonsoir,

Merci pour votre aide !

J'avais pris le traitement à l'envers

J'ai appris beaucoup de choses avec cet échange !

Merci,
ZiP

[Invité]

Tant mieux !

C'était aussi un bon exercice pour moi

N.B. Un sur mon message précédent aurait été sympa...

[[ZiP]]

Bonsoir,

Je ne connais pas bien ce système, c'est corrigé

Bonne soirée,
ZiP