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