redirection url avec champ formulaire. [Résolu]

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>

slackuser · 13/01/2011, 22h13

Bonsoir thunder75,

merci beaucoup, ça fonctionne nickel !!
Bonne fin de semaine.

SpaceFrog · 14/01/2011, 12h22

Code :

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

  $(function(){

est le raccourci pour

Code :

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

$(document).ready( function() {

thunder75 · 14/01/2011, 16h36

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

Code :

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

$(function(){

, personnellement j'utilise toujours

Code :

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

$(document).ready( function() {

13/01/2011, 15h38	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 005 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 005 Points : 45 088 Points : 45 088	sur quel evènement souhaites tu une redirection ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

13/01/2011, 16h38	#7
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 005 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 005 Points : 45 088 Points : 45 088	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 __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

14/01/2011, 12h22	#11
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 005 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 005 Points : 45 088 Points : 45 088	Code : Sélectionner tout - Visualiser dans une fenêtre à part $(function(){ est le raccourci pour Code : Sélectionner tout - Visualiser dans une fenêtre à part $(document).ready( function() { __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

13/01/2011, 15h40	#5
slackuser Candidat au titre de Membre du Club Inscription : mai 2008 Messages : 30 Détails du profil Informations personnelles : Localisation : France, Paris (Île de France) Informations forums : Inscription : mai 2008 Messages : 30 Points : 11 Points : 11	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.
	00

13/01/2011, 16h00	#6
slackuser Candidat au titre de Membre du Club Inscription : mai 2008 Messages : 30 Détails du profil Informations personnelles : Localisation : France, Paris (Île de France) Informations forums : Inscription : mai 2008 Messages : 30 Points : 11 Points : 11	Bonjour, ça correspond à l'évenement text ici, je pense. donc datatext si je comprends bien. text:'mon site 1' text:'mon site 2' etc
	00

13/01/2011, 19h17	#8
slackuser Candidat au titre de Membre du Club Inscription : mai 2008 Messages : 30 Détails du profil Informations personnelles : Localisation : France, Paris (Île de France) Informations forums : Inscription : mai 2008 Messages : 30 Points : 11 Points : 11	Bonsoir, merci pour l'info. je vais continuer a chercher. bonne soirée.
	00

13/01/2011, 22h13	#10
slackuser Candidat au titre de Membre du Club Inscription : mai 2008 Messages : 30 Détails du profil Informations personnelles : Localisation : France, Paris (Île de France) Informations forums : Inscription : mai 2008 Messages : 30 Points : 11 Points : 11	Bonsoir thunder75, merci beaucoup, ça fonctionne nickel !! Bonne fin de semaine.
	00

14/01/2011, 16h36	#12
thunder75 Membre à l'essai Inscription : avril 2008 Messages : 18 Détails du profil Informations forums : Inscription : avril 2008 Messages : 18 Points : 21 Points : 21	Effectivement ca aurait du fonctionner, mais ayant eu quelques soucis avec Code : Sélectionner tout - Visualiser dans une fenêtre à part $(function(){ , personnellement j'utilise toujours Code : Sélectionner tout - Visualiser dans une fenêtre à part $(document).ready( function() {
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email