Rafraichir une liste au click

**Fredy007** · 21/12/2016, 18h49

Bonjour,

DEMO

J'ai une list qui contient les noms des villes, quand je saisis le nom de la ville au champs search, je reçois les villes qui comprennent ces lettres, par exemple 'f' ça retourne une liste de 3 villes: Fes, Sefrou et Ifrane, mon problème est en 2 parties:

1- Si par exemple je saisis la lettre "Z", aucune ville ne contient cette lettre, j'efface la lettre et je recommence à saisir "f", dans ce cas la liste est vide, comment peut on rafraichir cette liste?

2- J'écris la lettre "f" et je selectionne parmi la liste la ville "Fes", alors je refais le click sur le champs search, mais la liste ne montre que la ville sélectionnée "Fes", la même question, comment rafraichir la liste afin d'avoir la liste de toutes les villes?

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
<ul class="city">
<li><input type="search" class="search"></li>
 
<div class="list">
<li id="Fes">Fes</li>
<li id="Casa">Casa</li>
<li id="Rabat">Rabat</li>
<li id="Marrakech">Marrakech</li>
<li id="Sefrou">Sefrou</li>
<li id="Agadir">Agadir</li>
<li id="Ifrane">Ifrane</li>
<li id="Oujda">Oujda</li>
</div>
</ul>

CSS:

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
16
17
18
19
20
21
ul.city {
      list-style-type: none;
}
 
.city {
    width: 200px;
    height: 100px;
    overflow-y: scroll;
    overflow-x:hidden;
    text-transform: capitalize; // first letter in uppercase
}
 
.search {
    text-transform: capitalize; // first letter in uppercase
}
 
.list {
    cursor: pointer;
    display: none;
 
}

jQuery:

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
/*** Search for element to loop for ***/
 
var child1 = $('.list').children();
console.log(child1);
/*
Output: [li#Fes, li#Casa, li#Rabat, li#Marrakech, li#Sefrou, li#Agadir, li#Ifrane, li#Oujda, prevObject: jQuery.fn.init[1]]
*/
 
var child2 = $('.list').children().eq(0);
console.log(child2);
/*
Output: [li#Fes, prevObject: jQuery.fn.init[8]]
*/
 
var child3 = $('.list').children().eq(0)[0];
console.log(child3);
/*
Output: <li id="Fes">Fes</li>
*/
 
var child4 = $('.list').children().eq(0)[0].tagName;
console.log(child4);
/*
Output: LI
*/
 
 
function filterList(className, value){
  var setList = [];
  var childs = $('.list').children().eq(0)[0].tagName;
 
  $(childs).each(function(ind, val){
    //console.log(val);
    //console.log('id'+val.id);
 
    // get ID and make small chars
    var getID	= val.id.toLowerCase();
    setList.push(getID);
 
  }); // end each
 
  // clean array from empty fields
 	var cleanList = setList.filter(function(e){return e});
 
  // get value and make it small chars
 //var getValue = $('.'+className).val().toLowerCase();
 //console.log('value '+getValue);
 
 var row = '';
 // loop through the array
 $.each( cleanList, function( x, y ){
//console.log('x '+x);
//console.log('y '+y);
//console.log('val '+getValue);
 
//var chk = $.inArray( getValue, y );
var chk = y.indexOf(value);
//console.log(chk);
 
if(chk > -1){
// do not set var row
row += '<li id="'+y+'">'+y+'</li>';
 
$('.list').html(row).show();
 
} else {
$('.list').hide();
$('.list').html(row).show();
}
 
}); // end each
 
 
} // end filterList()
 
$('.search').on('keyup', function(){
var value = $(this).val();
	filterList('city', value);
});
 
$('.search').on('click', function(){
	$('.list').show();
});
 
$('.list').click(function(e){
 
 var li = $(e.target);
 var getTxt = li.text();
 //console.log('text '+getTxt);
$('.search').val(getTxt);
$('.list').hide();
//$('.list').show();
 
 });
 
/*
$('.search').on('keyup', function(){
var setList = [];
$('li').each(function(ind, val){
	//console.log(val);
  //console.log(val.id);
  // get ID and make small chars
  var getID	= val.id.toLowerCase();
  setList.push(getID);
 
});
 //console.log(setList); 
 // ["", "Fes", "Casa", "Rabat", "Marrakech", "Sefrou", "Agadir", "Ifrane", "Oujda"]
 
 // clean array from empty fields
 var cleanList = setList.filter(function(e){return e});
 //console.log(cleanList);
 //["Fes", "Casa", "Rabat", "Marrakech", "Sefrou", "Agadir", "Ifrane", "Oujda"]
 
 // get value and make it small chars
 var getValue = $(this).val().toLowerCase();
 //console.log(getValue);
 
 var row = '';
 // loop through the array
 $.each( cleanList, function( x, y ){
//console.log('y '+y);
//console.log('val '+getValue);
 
//var chk = $.inArray( getValue, y );
var chk = y.indexOf(getValue);
//console.log(chk);
 
if(chk > -1){
// do not set var row
row += '<li id="'+y+'">'+y+'</li>';
 
$('.list').html(row).show();
 
} else {
$('.list').hide();
$('.list').html(row).show();
}
 
}); // end each
 
}); // end keyup
 
 
$('.list').click(function(e){
 
 var li = $(e.target);
 var getTxt = li.text();
 //console.log('text '+getTxt);
$('.search').val(getTxt);
$('.list').hide();
 
 });
 */

Merci a vous

**Toufik83** · 21/12/2016, 22h24

pourquoi ne pas jouer juste avec la visibilité?

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
 
function filterList(ParentClassName,cibleClassName, value){
$("."+ParentClassName).find("."+cibleClassName).children().each(function(){
var text=$(this).attr("id").toLowerCase();
if(text.indexOf(value.toLowerCase())>-1){
  	 $(this).show();
}
  else $(this).hide();
});
} // end filterList()
 
$('.search').on('keyup', function(){
var value = $(this).val();
  filterList("city",'list',value);
});

ATTENTION, il ne faut pas avoir plusieurs éléments html qui ont les mêmes classes, sinon tu peux déclarer un ID UNIQUE pour le parent voulu, et le remplacer dans la fonction

Code :

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

filterList("#idParent",".classCible",valeur);

**Fredy007** · 22/12/2016, 08h06

J'ai testé votre code, mais il n a rien changé pour résoudre mon problème, ici la DEMO

En écrivant une lettre par exemple "M", elle va nous retourner la ville "Marrakech", alors quand on click sur "Marrakech", elle est insérée au champs "search", maintenant je veux change de ville, je supprime "Marrakech", et j'écris la lettre "O", elle doit me retourner les 2 villes: Sefrou et Oujda, c'est là où le problème persiste, la liste est vide

EDIT:

Voici la solution que j'ai pu trouver, en attendant s'il y a une autre plus simple DEMO:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var lists = '';
$('.search').on('click', function(){
	//$('.list').show();
  var ch = $('.list').children();
//console.log(ch);
$(ch).each(function(){
var getID	= $(this).attr('id');
//console.log(getID);
lists += '<li id="'+getID+'">'+getID+'</li>';
})
//console.log(lists);
$('.list').html(lists).show();
});

**Toufik83** · 22/12/2016, 14h49

il existe l'événement "search" en jQuery, tu peux détecter le clique de l'utilisateur sur l'icone de fermeture de l'input type="search".
https://jsfiddle.net/Toufi9/Lhw9k9he/

**NoSmoking** · 22/12/2016, 20h22

Bonjour,
ton code HTML est une véritable Horreur et devrait ressembler à cela

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<input type="search" class="search">
<div class="list">
  <ul class="city">
    <li>Fes</li>
    <li>Casa</li>
    <li>Rabat</li>
    <li>Marrakech</li>
    <li>Sefrou</li>
    <li>Agadir</li>
    <li>Ifrane</li>
    <li>Oujda</li>
  </ul>
</div>

si tu n'as pas plus de ville que cela tu pourrais trouver avantage à utiliser les <datalist>, le résultat serait pratiquement le même sauf sous IE qui gère cela légèrement différemment.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<input list="data-villes">
<datalist id="data-villes">
  <option>Fes</option>
  <option>Casa</option>
  <option>Rabat</option>
  <option>Marrakech</option>
  <option>Sefrou</option>
  <option>Agadir</option>
  <option>Ifrane</option>
  <option>Oujda</option>
</datalist>

**Fredy007** · 23/12/2016, 16h37

@ Toufik83: Oui, aussi une bonne option, mais elle bug au niveau du click au sein du box (search)

EDIT:

@ NoSmoking: Effectivement, mais j'ai une très longue liste

Normalement les codes marchent bien, mais si quelqu'un peut m'explique dans mon code ici, pourquoi en saisissant les 2 lettres "Fe", affiche "Fes", alors en supprimant lettre par lettre "le champs devient vide", et en saisissant la lettre "M", rien n'existe dans la liste

**Toufik83** · 23/12/2016, 21h13

Envoyé par Fredy007

@ Toufik83: Oui, aussi une bonne option, mais elle bug au niveau du click au sein du box (search)

de quel bug tu parles? explique moi un peu ..., j'ai fais exactement ce que tu as dit et y'avait aucun bug.

Envoyé par Fredy007

mais si quelqu'un peut m'explique dans mon code ...

ton code ne fonctionne pas, par-ce que chaque fois tu change le contenu de la div class="list" avec :

Code :

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

$(".list").html(lists);

le moment quand tu fais un $.html() a un élément html, cela veux dire que tu change totalement le contenu de cet élément, donc si on écrit dans la zone de texte "F", ta div ne contiendra QUE les <li> ayant un Id qui contient la lettre "f", les autres <li> qui ne correspondent pas a la critère de recherche sont supprimés.

je pense que le moyen le plus simple est de jouer avec la visibilité de tes éléments <li>, et SURTOUT ET AVANT TOUT, CORRIGER TON CODE HTML, suivant le commentaire de @NoSmoking

Rafraichir une liste au click

jQuery

Vue hybride

Discussions similaires

Partager

Partager