Bonjour,
J'ai 2 input :
l'un qui se rempli par autocomplétion par une source json et l'autre qui se rempli en fonction du 1er input.
Je voudrais que le contenu des 2 input s'affiche en totalité en bref que l'on lise le contenu sans toucher la souris.
J'ai essayé différentes techniques en css mais sans succés.
J'ai ajouté ce script :
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 <script type="text/javascript"> jQuery( document ).ready( function( $ ) { var size= $('input[name="xbs_input"]').css('font-size'); $( 'input[name="xbs_input"]').on( 'keydown change', function(e) { $('<span style="font-size: ' + size + ';"></span>').insertAfter($(this)); var $span= $(this).next("span"); $span.text($(this).val()); var incert= (e.keyCode == 8) ? 0 : 10; if ($span.width() >= 150) { $(this).width( $span.width() + incert ); } $span.remove(); }); }); </script>
ça fonctionne si j'écris dans mon input mais pas avec le remplissage automatique donc avez-vous une solution à me proposer?
Merci
Voici le code :
Code HTML : 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
44
45
46
47
48
49 <!DOCTYPE html> <html lang="en"> <head> <title>Abréviations médicales</title> <link href="EasyAutocomplete/easy-autocomplete.min.css" rel="stylesheet" type="text/css"> <script src="jquery/jquery-1.11.2.min.js"></script> <script src="EasyAutocomplete/jquery.easy-autocomplete.min.js" type="text/javascript" ></script> </head> <body> <h1>EasyAutocomplete - json example</h1> <label>Mot</label> <input id="data-json" /> <label>Définition</label> <input id="data-definition" class="form-control" type="textarea" value=""/> <script type="text/javascript"> $(document).ready(function() { $("#data-json").easyAutocomplete({ url: "json/def.json", getValue: function(element) { return element.name; }, list: { match: { enabled: true }, onClickEvent: function(K,elm) { var value = $("#data-json").getSelectedItemData().code; console.log("name => " + value); $("#data-definition").val(value); } } }); }); </script> </body> </html>
Partager