autocomplete avec select dans un autre champ

Version imprimable

22/04/2013, 11h14
eomer212

autocomplete avec select dans un autre champ

bonjour.
je voudrais utiliser l'autocomplete pour renvoyer une ville selectionnée en fonction du code postal tapé.
la donnée correspondante est generée normalement par la reponse coté serveur.
mais le probleme vient du fait que l'autocomplete met à jour systematiquement le champ de saisie avec la valeur selectionnée dans la liste deroulante de l'autocomplete,
hors, je voudrais pouvoir lui indiquer de reporter ce resultat dans le champ ville plutot que dans le champs de saisie code postal, pour le laisser tel que saisi.
j'ai fait un jsfidle qui illustre ceci .
http://jsfiddle.net/9fuvr/17/

le tout en jquery 1.9.1 et jquery UI 1.9.2

ca marchait dans les versions precedentes, (jquery 1.7.2, jqueryUI 1.8.11) en interceptant l'event select, mais depuis ca marche plus, ca a du changer, ou c'est un bug de mise a jour?

une suggestion.?

Code:

1
2
3
select: function(evt, ui){
  $('#result').val(ui.item.label);
}

Ton fiddle v18

Bonjour

Si j'ai bien compris :

Code:

1
2
3
"select" : function( event, ui ){
    $( "#result" ).val( ui.item.value );
}

22/04/2013, 11h52
eomer212

oui, on recupere bien la valeur selectionnée pour alimenter le champ resultat,
mais le probleme, c'est qu'il met toujours la valeur selectionnée dans le champ initial de saisie..
coimment changer ce dernier comportement.?
je veux garder la valeur saisie.

j'ai simulé le comportement en reprenant ta modif.

http://jsfiddle.net/9fuvr/22/
22/04/2013, 12h34
eomer212

si je reprends la doc de jqueryUI concerant l'evenement select

Citation:

select( event, ui )Type: autocompleteselect

Triggered when an item is selected from the menu. The default action is to replace the text field's value with the value of the selected item.
Canceling this event prevents the value from being updated, but does not prevent the menu from closing.
event
Type: Event
ui
Type: Object
item
Type: jQuery
The selected item.

Code examples:

Initialize the autocomplete with the select callback specified:
$( ".selector" ).autocomplete({ select: function( event, ui ) {}});

Bind an event listener to the autocompleteselect event:
$( ".selector" ).on( "autocompleteselect", function( event, ui ) {} );

HORS, le comportement par defaut de select n'est pas changé par la reecriture du traitement de select. une erreur quelque part.?
ou alors j'ai pas compris comment annuler l'evenement.??
il faut faire comment.?

j'ai fini par trouver.
l'autocomplete en version 1.9.1, pour une raison que je ne connais pas encore, ne tient pas compte de l'interception du select comme indiqué dans la doc, et il n'y a rien à faire, sauf modifier jquery ou ruser.
modifier jquery, ouf..
ruser, je sais faire..

voila le resultat pour ceux qui seraient interressés.
http://jsfiddle.net/9fuvr/25/

au cas ou le jsfidle sauterait..
le html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
this jsfiddle just to test 1 functionnality.<br>
i need to have an autocomplete from a data and have result<br>
in other area than the autocomplete input<br>
how to say to autocomplete to report result in another area.?<br>
AND KEEP INITIAL CONTENT<br>
the behavior needed is simulated with timeout.<br>
en francais.<br>
j'ai besoin d'une fonction autocomplete à partir d'une saisie<br><br>
QUI LAISSE LE CHAMP DE SAISIE INTACTE !!<br><br>
et reporte le resultat selectio dans un autre champ.fsd<br>
comment dire à l'autocomplete de faire ca.? <br>j'ai simulé le comportement voulu avec des timeout.<br>
 
<br><br>
Saisie: <input type="text" id="autocomplete" value=""></input>just type 1 to autocomplete and select 21<br>
Result: <input type="text" id="result" value=""></input>
<input style="display:none;" id="tagville" />

le css

Code:

body{font:62.5% Verdana,Arial,sans-serif;}

le javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$('#saisie').keyup(function(e) {
    valeur=$(this).val();
    $("#autocomplete").val(valeur);
    $( "#autocomplete" ).autocomplete( "search", valeur );
});
 
$( "#autocomplete" ).autocomplete({
    position:{of:$( "#result" )},  // positionne l'autocomplete sous le champ resultat
    source: function( req, resp ) {
        $.post( "/echo/json/", {
            json: '["11", "21", "31", "41", "51"]',
            delay: 1
        }, function(data) {
            resp( data );
        }, "JSON" );
    },
    select: function(evt, ui){
      $('#result').val(ui.item.label);
        oldsaisie=$("#autocomplete" ).val();
    }
 
});

bien sur, version jquery 1.9.1 et jqueryUI 1.9.2

si vous trouvez plus simple ou une maniere plus propre de faire, je prends..!!:ccool:

23/04/2013, 23h03
danielhagnoul
Bonsoir

Citation:

Canceling this event prevents the value from being updated, but does not prevent the menu from closing.

Idée, ajouter un return false; ?
Code:

1 2 3 4 "select" : function( event, ui ){ $( "#result" ).val( ui.item.value ); return false; }
24/04/2013, 02h32
eomer212

oui, en effet, ca m'était sorti de la tete..
:aie:

ca servira pour plus tard.
car je ne peux pas lier directement le champ de saisie à l'autocomplete,
car si il appuie sur la touche bas, l'utilisateur va afficher à la place du code postal le nom d'une des villes en retour..
donc, pas cette fois ci, mais bon rappel.

il faut maintenant que je trouve le moyen de selectionner la premiere entrée de la liste deroulante et les suivantes en fonction de l'appui sur haut et bas, et revenir à la saisie du code postal, pour vraiment 'simuler' l'autocomplete initial..
oui, c'est une grosse derogation à son fonctionnement initial, mais ca fait un effet boeuf.. :mrgreen:

bon, avec un bon coup dans le cerveau gauche,
on arrive à quelque chose de vraiment plus simple, elegant et fonctionnel.

http://jsfiddle.net/9fuvr/29/

merci danielhagnoul :ccool:

html

Code:

1
2
3
4
5
6
7
8
9
10
finalement, il suffisait de mieux lire la doc et de comprendre leur philosophie.<br>
<b>but initial.<br> avoir un autocomplete personnalisé,<br> reportant la selection dans un autre champ resultat<br>
preservant la saisie initiale du champ de recherche <br>
et affichant le menu deroulant de choix sous le champ resultat</b><br>
pour verifier l'argument de recherche, il est integré dans la reponse dynamique
<br><br>
Saisie: <input type="text" id="saisie" ></input>
taper n'importe quoi<br>
recherche<input type="text" id="search" value=""></input> affiche l'argument de recherche utilisé comme temoin<br>
Result: <input type="text" id="result" value=""></input> recoit le resultat selectionné

javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$( "#saisie" ).autocomplete({
    position:{of:$( "#result" )}  // positionne l'autocomplete sous le champ resultat
    ,minLength: 1
    ,source: function( req, resp ) {
        $("#search").val(req.term);
        $.post( "/echo/json/", {
            json: '["'+req.term+'_11", "'+req.term+'_21", "'+req.term+'_31", "'+req.term+'_41", "'+req.term+'_51"]',
            delay: 1
        }, function(data) {
            resp( data );
        }, "JSON" );
    }
    ,select: function(evt, ui){
      $('#result').val(ui.item.label);
 
        return false;
    }
    ,focus:function(event,ui){
        return false;
    }
});

jquery 1.9.1 et jqueryui 1.9.2