redirection url avec champ formulaire.

**slackuser** · 13/01/2011, 15h08

Bonjour,

je souhaite créer un champ liste avec divers nom de site web qui puisse rediriger un utilisateur (appelons le Bob) vers le site en popup.

Voici où j'en suis :
(j'utilise 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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
  <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
 
 
  <script>
var data = [ 
  {text:'Web Design', url:'  http://www.nimpkish.com/web-design'},
  {text:'Web Development', url:'http://www.nimpkish.com/web-development'},
  ]; 
 
 
$('#autoComplete').autocomplete(data, {
  formatItem: function(item) { 
    return item.text;
  } 
}).result(function(event, item) {
  location.href = item.url;
});
 
 
 
  </script>
</head>
<body>
 
 
<div>
  <input id="autoComplete" />
</div>
 
 
</body>
</html>

Je me suis basé sur ce link :
http://nimpkish.com/blog/jquery-auto...e-and-data-set
et
http://docs.jquery.com/Plugins/Autocomplete

merci pour votre aide.

**SpaceFrog** · 13/01/2011, 15h26

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
<script type="text/javascript">
  $(function(){
   var data = [{text:'mon site 1', url:' http://www.google.fr/'},
 {text:'mon site 2', url:'http://www.yahoo.fr'},
 {text:'mon site 3', url:'http://www.bfm.fr'},
 {text:'mon site 4', url: 'http://www.developpez.net/forums/'}
];
var datatext=[]
var dataurl=[]
var i=-1
 
while(data[++i]){
 datatext.push(data[i].text);    
 dataurl.push(data[i].url);
}
 
 $("#mon_exemple").autocomplete(datatext);
  });
 
  </script>
 
</head>
<body>
<div>
  <input id="mon_exemple" />
</div>
 
 
</body>
</html>

**slackuser** · 13/01/2011, 15h36

Bonjour,

merci beaucoup pour ton aide.
J'ai à present la completion qui fonctionne, mais tjrs pas de redirection.

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
 
<script type="text/javascript">
  $(function(){
   var data = [{text:'mon site 1', url:' http://www.google.fr/'},
 {text:'mon site 2', url:'http://www.yahoo.fr'},
 {text:'mon site 3', url:'http://www.bfm.fr'},
 {text:'mon site 4', url: 'http://www.developpez.net/forums/'}
];
var datatext=[]
var dataurl=[]
var i=-1
 
while(data[++i]){
 datatext.push(data[i].text);    
 dataurl.push(data[i].url);
}
 
 $("#mon_exemple").autocomplete(datatext);
  });
 
  </script>
 
</head>
<body>
<div>
  <input id="mon_exemple" />
</div>
 
 
</body>
</html>

**SpaceFrog** · 13/01/2011, 15h38

sur quel evènement souhaites tu une redirection ?

**slackuser** · 13/01/2011, 15h40

Bonjour,

je souhaite une redirection lorsque je saisi le nom d'un site.
par exemple :
je saisi "toto" la completion s'effectue et je suis redirigé sur le site de "toto"
je saisi "bob" la completion me trouve bob et je suis redirigé sur le site de "bob"

merci.

**slackuser** · 13/01/2011, 16h00

Bonjour,

ça correspond à l'évenement text ici, je pense.
donc datatext si je comprends bien.

text:'mon site 1'
text:'mon site 2'
etc

**SpaceFrog** · 13/01/2011, 16h38

d'après la doc on devrait pouvoir lancer un callback sur différente events de l'autocomplete ...

Code :

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

	$("#mon_exemple").autocomplete(datatext,{ select: function(event, ui) { alert('coucou') } });

mais il n'a pas l'air d'en vouloir

**slackuser** · 13/01/2011, 19h17

Bonsoir,

merci pour l'info.
je vais continuer a chercher. bonne soirée.

**thunder75** · 13/01/2011, 21h44

Bonsoir,

Ton code dans ton premier post est bon mais faut que tu rajoutes le code en rouge ci dessous :

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
<script>
$(document).ready( function() {
var data = [ 
  {text:'Web Design', url:'  http://www.nimpkish.com/web-design'},
  {text:'Web Development', url:'http://www.nimpkish.com/web-development'},
  ]; 
 
 
$('#autoComplete').autocomplete(data, {
  formatItem: function(item) { 
    return item.text;
  } 
}).result(function(event, item) {
  location.href = item.url;
});
});
  </script>