[Débutant] menu de recherche javascript

Bonjour tous le monde,

je veux savoir comment faire un angle de recherche identique a celui dans ce forum qui s'affiche quand en clique sur recherche et disparait des qu'il perd le focus .

et MERCI ..

heuuu tu veux de l'algo ou du code déja tout pondu ;) ?

il te faut utiliser un timer ( settimeout )
une div et modifier sa taille et largeur.

voila les grandes lignes :)

Merci pour votre réponse :
j'aimerai bien avoir directement le code pour aller vite ,

je serai le comprendre "je croix " :king:
Merci encore...

voila les bases :

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">
        var foo = function(){
            var me = this;
            this.div = null;
            this.CurrentWidth = 0;
            this.CurrentHeight = 0;
            this.id =  null;
            this.MaxWidth = 0;
            this.MAxHeight = 0;
            this.timer1 = null;
        }
 
        foo.prototype.Init = function(MaDiv, MaxWidth , MAxHeight){
            this.div = MaDiv;
            this.CurrentWidth = parseInt(MaDiv.style.width);
            this.CurrentHeight = parseInt(MaDiv.style.height);
            this.id =  MaDiv.id;
            this.MaxWidth = MaxWidth;
            this.MAxHeight = MAxHeight;
        };
 
        foo.prototype.OpenBox = function(){
            var temp = this;
            var t1 = false;
            var t2 = false;
 
            if(this.MaxWidth > parseInt(this.div.style.width)){
                this.div.style.width = parseInt(this.div.style.width) + 10 + "px";
            }
            else{
                t1 = true;
            }
 
            if(this.MAxHeight > parseInt(this.div.style.height)){
                this.div.style.height = parseInt(this.div.style.height) + 1 + "px";
            }
            else{
                t2 = true;
            }
 
 
            if(!t1 || !t2){
                this.timer1 = setTimeout(function(){temp.OpenBox()},10);
            }
            else{
                clearTimeout(this.timer1);
            }
        };
     </script>
</head>
<body>
<div id="titi" style="width:0px;height:20px;border:1px solid red">
    test
</div>
<script type="text/javascript">
var momo = new foo();
momo.Init(document.getElementById('titi'),500,70);
momo.OpenBox();
</script>
</body>
</html>