Discussion :

[PIEPLU]

Bonjour,



J'ai créé une liste déroulante de cette façon en html/jquery.

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
<form id="ui_element" class="sb_wrapper">
	<p>
		<span class="sb_down"></span>
		<input class="sb_input" type="text">
		<span class="sb_search refine-book"></span>
	</p>
 
	<ul class="sb_dropdown" style="display: none;">
		<li class="strong">Affiner par rubrique</li>
		<li class="link-like refine-book" data-type="categories" data-refine-subcategory-id="12" data-refine-subcategory-name="Boulangeries Pâtisseries" data-book-id="2257"><label for="Boulangeries Pâtisseries">Boulangeries Pâtisseries</label></li>
 
		<li class="strong">Affiner par ville</li>
		<li class="link-like refine-book" data-type="cities" data-refine-city-id="5530" data-refine-city-name="Caen" data-book-id="2257"><label for="Caen">Caen</label></li>
		<li class="link-like refine-book" data-type="cities" data-refine-city-id="11518" data-refine-city-name="Ferney Voltaire" data-book-id="2257"><label for="Ferney Voltaire">Ferney Voltaire</label></li>
 
		<li class="strong">Affiner par département</li>
		<li class="link-like refine-book" data-type="departments" data-refine-dept-id="14" data-refine-dept-name="Calvados" data-book-id="2257"><label for="Calvados">Calvados</label></li>
		<li class="link-like refine-book" data-type="departments" data-refine-dept-id="1" data-refine-dept-name="Ain" data-book-id="2257"><label for="Ain">Ain</label></li>
	</ul>
</form>

Et maintenant, j'ai besoin que lorsque je saisie dans l'input text "<input class="sb_input" type="text">", ca filtre sur les éléments de la liste.

Mais je ne sais pas comment faire. Une idée ?


Merci

[-Rpass-]

Tu récupères le contenu du champs input, tu récupère les éléments li qui contienne le texte que tu as saisis, et tu les caches en modifiant la propriété css ou tu utilises la fonction hide() si tu utilises JQuery

[SpaceFrog]

Sur quel critères ?
le contenu des li ? le data-des li ???


Sinon c'est simple, ça se passe avec le selecteur JQuery (au passage tu n'es pas dans le bon forum).

tu mets une class specifique ou tu change le css display non

[PIEPLU]

L'idée est de rechercher sur :

Boulangeries Pâtisseries

Ferney Voltaire

Calvados

Donc sur les data-

Il faut un data- avec un nom commun ?

Merci

[SpaceFrog]

Tu as donné la moitié de la réponse ...

Code :

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

$('[data-metier="'+ variable +'"]').addClass('filter')