redirection url avec champ formulaire.

Version imprimable

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:

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.

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
<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>

Bonjour,

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

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
 
<!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>

13/01/2011, 15h38
SpaceFrog

sur quel evènement souhaites tu une redirection ?
13/01/2011, 15h40
slackuser

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.
13/01/2011, 16h00
slackuser

Bonjour,

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

text:'mon site 1'
text:'mon site 2'
etc
13/01/2011, 16h38
SpaceFrog

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

Code:

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

mais il n'a pas l'air d'en vouloir
13/01/2011, 19h17
slackuser

Bonsoir,

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

Bonsoir,

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

Code:

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>

13/01/2011, 22h13
slackuser

Bonsoir thunder75,

merci beaucoup, ça fonctionne nickel !!
Bonne fin de semaine. :ccool:
14/01/2011, 12h22
SpaceFrog

8O8O8O8O8O

Code:

$(function(){

est le raccourci pour

Code:

$(document).ready( function() {
14/01/2011, 16h36
thunder75

Effectivement ca aurait du fonctionner, mais ayant eu quelques soucis avec

Code:

$(function(){

, personnellement j'utilise toujours

Code:

$(document).ready( function() {