SHOW:
|
|
- or go back to the newest paste.
| 1 | <html> | |
| 2 | - | <title>Auto completar</title> |
| 2 | + | <head> |
| 3 | - | <head> |
| 3 | + | <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"> |
| 4 | - | <script src="js/jquery-1.7.1.min.js"></script> |
| 4 | + | </head> |
| 5 | - | <script src="js/jquery.ui.core.min.js"></script> |
| 5 | + | <body> |
| 6 | - | <script src="js/jquery.ui.widget.min.js"></script> |
| 6 | + | <form method="post"> |
| 7 | - | <script src="js/jquery.ui.position.min.js"></script> |
| 7 | + | <input type="hidden" name="estado" id="estado" /> |
| 8 | - | <script src="js/jquery.ui.autocomplete.min.js"></script> |
| 8 | + | Estado: <input type="text" name="estado_autocomplete" id="estado_autocomplete" /> <br /> |
| 9 | - | <link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css"/> |
| 9 | + | Município: <input type="text" name="municipio" id="municipio" /> <br /> |
| 10 | - | </head> |
| 10 | + | <input type="submit" /> |
| 11 | - | <body> |
| 11 | + | </form> |
| 12 | - | <script> |
| 12 | + | <script src="//code.jquery.com/jquery-2.1.3.min.js"></script> |
| 13 | - | |
| 13 | + | <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script> |
| 14 | - | $(function() {
|
| 14 | + | <script> |
| 15 | - | |
| 15 | + | $('#estado_autocomplete').autocomplete({
|
| 16 | - | $( "#input_estados" ).autocomplete( |
| 16 | + | source: function (request, response) {
|
| 17 | - | {
|
| 17 | + | $.ajax({
|
| 18 | - | source:'estados.php', |
| 18 | + | url: '/teste/ajax.php?q='+$('#estado_autocomplete').val(),
|
| 19 | - | select: function( event, ui ) {
|
| 19 | + | dataType: 'json' |
| 20 | - | $( "#input_estados" ).val( ui.item.estado + " / " + ui.item.uf ); |
| 20 | + | }).done(function(data) {
|
| 21 | - | $( "#hidden_uf" ).val( ui.item.id ); |
| 21 | + | var result = $.map( data, function( item ) {
|
| 22 | - | return false; |
| 22 | + | console.log(item); |
| 23 | - | } |
| 23 | + | return {
|
| 24 | - | }).data( "autocomplete" )._renderItem = function( ul, item ) {
|
| 24 | + | label: item.estado, |
| 25 | - | return $( "<li></li>" ) |
| 25 | + | value: item.id |
| 26 | - | .data( "item.autocomplete", item ) |
| 26 | + | } |
| 27 | - | .append( "<a><strong>" + item.estado + "</strong> / " + item.uf + "</a>" ) |
| 27 | + | }) |
| 28 | - | .appendTo( ul ); |
| 28 | + | response(result); |
| 29 | - | |
| 29 | + | }) |
| 30 | - | }; |
| 30 | + | }, |
| 31 | - | |
| 31 | + | focus: function(event, ui) {
|
| 32 | - | $( "#input_municipios" ).autocomplete( |
| 32 | + | $("#estado_autocomplete").val(ui.item.label);
|
| 33 | - | {
|
| 33 | + | return false; |
| 34 | - | source:'municipios.php?uf='+$( "#hidden_uf" ).val(), |
| 34 | + | }, |
| 35 | - | select: function( event, ui ) {
|
| 35 | + | change: function(event, ui) {
|
| 36 | - | $( "#input_municipios" ).val(ui.item.municipio); |
| 36 | + | $("#estado").val(ui.item.value);
|
| 37 | - | return false; |
| 37 | + | $("#estado_autocomplete").val(ui.item.label);
|
| 38 | - | } |
| 38 | + | return false; |
| 39 | - | }).data( "autocomplete" )._renderItem = function( ul, item ) {
|
| 39 | + | }, |
| 40 | - | return $( "<li></li>" ) |
| 40 | + | select: function( event, ui ) {
|
| 41 | - | .data( "item.autocomplete", item ) |
| 41 | + | $("#estado").val(ui.item.value);
|
| 42 | - | .append( "<a><strong>" + item.municipio + "</strong></a>" ) |
| 42 | + | $("#estado_autocomplete").val(ui.item.label);
|
| 43 | - | .appendTo( ul ); |
| 43 | + | return false; |
| 44 | - | }; |
| 44 | + | }, |
| 45 | - | |
| 45 | + | }); |
| 46 | - | }); |
| 46 | + | </script> |
| 47 | - | |
| 47 | + | </body> |
| 48 | - | </script> |
| 48 | + | </html> |
| 49 | - | <form method="get" value"#"> |
| 49 | + | <?php |
| 50 | - | Estado: <input type="text" id="input_estados" /> <br> |
| 50 | + | echo '<pre>' , print_r($_POST, 1); |
