Input type recherche et div en hidden

Résolu/Fermé
stefde10 Messages postés 100 Date d'inscription jeudi 5 avril 2007 Statut Membre Dernière intervention 13 janvier 2014 - 13 janv. 2014 à 12:14
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 14 janv. 2014 à 01:19
Bonjour,

Alors voilà, depuis quelques temps, je me suis mis dans la tête d'essayer de faire un une barre de recherche à la façon Facebook en CSS3 uniquement (sans JS) mais à priori c'est impossible d'après ce que j'ai pu lire.

J'avais bien un script pour faire ceci avec onkeyup mais à chaque fois que je tape sur une touche, la div apparaît et disparaît sans arrêt. Je ne vois pas comment faire autrement qu'avec du js. mais pour cela on dois utiliser quel on_ ???

Je pensais faire un système onsubmit avec une page de traitement de la requête et ramener directement dans ma div le résultat... mais ça ne règle pas mon problème de comment faire apparaître une div quand on tape une première lettre dans un input type text et faire en sorte qu'elle ne se referme plus après parce que même avec mon onsubmit, il va envoyer la requête à chaque fois et donc me faire réapparaître la div à chaque fois.

Bon j'avoue, je suis un vrai noob voir même un bille car je pige rien au JS mais à priori c'est faisable qu'avec ça donc si vous avez un script à me proposer ou une solution je suis preneur.

;)

2 réponses

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 13/01/2014 à 13:13
bonjour

1) tu crées ta div exemple <div id ="cacher"></div>
2) tu lui donne avec css display:none;
3) tu créer une fonction dans le head
4 )tu l'appelle avec onkeydown

la fonction dans le head
<script type="text/javascript">
function affiche()
{
document.getElementById('cacher').style ="display:block";
}
</script>

appel de la fonction
<input type="text" onkeydown="affiche();">


Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
0
stefde10 Messages postés 100 Date d'inscription jeudi 5 avril 2007 Statut Membre Dernière intervention 13 janvier 2014 11
13 janv. 2014 à 17:25
Merci beaucoup,

je vais tenter ça. par contre il me semble qu'il existe aussi une fonction pour une fois la div ouverte, la fermée si on clique à l'extérieur de cette fameuse div.

Aurais-tu aussi une idée en ce sens ?
0
stefde10 Messages postés 100 Date d'inscription jeudi 5 avril 2007 Statut Membre Dernière intervention 13 janvier 2014 11
13 janv. 2014 à 18:45
bon par contre je viens de constater que la requête doit se faire via AJAX ....
va falloir que je trouve un programmeur AJAX qui pourrait me faire ça contre rémunération ^^
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 14/01/2014 à 01:20
pour cacher la div

<script type="text/javascript">
function cache()
{
document.getElementById('cacher').style ="display:none";
}
</script>

<a href="" onclick="cache();">fermer</a>
0