[Resolvido] autocomplete por class

junaooaks · Agosto 21, 2012

ola pessoal tenho um pequeno problema

uso um script de auto-complete que funciona perfeito se for usar somente um input mas agora estou precisando de usar em varios inputs ao mesmo tempo ou seja não posso fazer pelo id do elemento preciso usar a class

entao como converto para tal situação

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<link type="text/css" href="resources/css/jquery-ui-1.8.21.custom.css" rel="stylesheet"/>
<script type="text/javascript">
 $(document).ready(function()     {

   $('#auto').autocomplete(
   {

     source: "app/view/ajax.php",
    minLength: 1
   });
 });

</script>

input

<input type="text" id="auto" name="item1" size="70" class="effect" onkeyup="up(this)"/>

preciso fazer pela class porque vou usar varios inputs que sao incrementado dinamicamente

obrigado

Ted k' · Agosto 21, 2012

Ao inves de $('#auto') use $('.effect')

junaooaks · Agosto 22, 2012

ola

obrigado pela resposta

já tentei em varias formas, mas todas as vezes que adiciona uma linha dinâmica

não faz o autocomplete.

tentei chamar pela function no botão que acrescenta a linha ma não adiantou

vou coloca o html.



<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<link type="text/css" href="resources/css/jquery-ui-1.8.21.custom.css" rel="stylesheet"/>
<script type="text/javascript" src="js/add.js"></script>
<script>
   $(document).ready(function(){

       //iterate through each textboxes and add keyup
       //handler to trigger sum event
       $(".soma").each(function() {

           $(this).keyup(function(){
               calculateSum();
           });
       });

   });

   function calculateSum() {

       var vl = 0;
       //iterate through each textboxes and add the values
       $(".soma").each(function() {

           //add only if the value is number
           if(!isNaN(this.value) && this.value.length!=0) {
               vl += parseFloat(this.value);
           }

       });
       //.toFixed() method will roundoff the final sum to 2 decimal places
       $("#vl").html(vl.toFixed(2));
   }

   function soma (){
       vl  = parseFloat(document.getElementById('vl').innerHTML);
       per = parseFloat(document.getElementById("per").value);

       resultado =((vl / 100) * per) + vl;

       resultado = (Math.round(resultado*100))/100;

       document.custo.total.value=resultado;

   }
</script>


<script type="text/javascript">
 $(document).ready(function()     {

   $('.auto').autocomplete(
   {

     source: "app/view/ajax.php",
    minLength: 1
   });
 });

</script>

<div id="datagrid">
   <h1>CADASTRO PEDIDO</h1>
   <hr>
   <fieldset>


       <form method="GET" action="" id="tr" name="custo">
           <!--tr id="tr"> 
                <td>Custo Produto:</td>
                <td><input name="custopro" type="text" id="auto" class="effect" value="" size="92" onkeyup="up(this)" /> <input type="submit" name="consulta" value="Consultar" class="effect" id="consultar"></td></td>

        </tr--> 

           <h1>PEDIDO</h1>
           <table border="0">

               <hr>
               <tr>
                   <td>Operação:</td>
                   <td><select name="operacao" id="operacao" class="effect">
<?php 
 ?>
                       </select></td>
                   <td>N° Pedido:</td>
                   <td><input name="nf" type="text" class="effect" id="nf" onkeyup="up(this)" value="<?php echo $frete; ?>" size="10" maxlength="10" /></td>
                   <td>Data Emtrada:</td>
                   <td><input name="dataentrada" type="text" class="effect" id="dataentrada" onkeyup="up(this)" value="<?php echo date('d/m/Y'); ?>" size="10" maxlength="10" /></td>
               </tr>
               <tr>
                   <td>Fornecedor:</td>
                   <td colspan="5"><select name="fornecedor" id="fornecedor" class="effect">
<?php 
if
?>
                       </select></td>
               </tr>
               <tr> 
                   <td>Data Emissao:</td>
                   <td><input name="dataemissao" type="text" class="effect" id="dataemissao" onkeyup="up(this)" value="<?php echo $frete; ?>" size="10" maxlength="10" /></td>
                   <td>Valor Final:</td>
                   <td><input name="valorfinal" type="text" class="effect" id="valorfinal" onkeyup="up(this)" value="<?php echo $fretep; ?>" size="10" maxlength="10" /></td>
                   <td>Condição PG:</td>
                   <td><input name="condicaopg" type="text" class="effect" id="condicaopg" onkeyup="up(this)" value="<?php echo $fretep; ?>" size="10" maxlength="10" /></td>
               </tr>
               <tr> 
                   <td>Loja:</td>
                   <td colspan="5"><select name="loja" id="fornecedor2" class="effect">
<?php     
 ?>
                       </select></td>
           </table> 
           <tr>     <h1>ITENS PEDIDO</h1></tr><hr>

           <table border="0" id="lista">
               <tr style="color:#000; font-weight:bold; background:#D9E5F3;">
                   <td colspan="6" align=""><a href="#" id="mais"><img src="resources/images/add.png" border="0"/></a></td>
               </tr>
               <tr style="color:#FFF; font-weight:bold; background:#024B78;">
                   <td align="center">PRODUTO</td>
                   <td align="center">QUANT.</td>
                   <td align="center">CUSTO UNI.</td>
                   <td align="center">CUSTO</td>
                   <td align="center">EXC...</td>
               </tr>
               <tr>
                   <td><input type="text" name="item1" size="70" class="effect auto" onkeyup="up(this)"/></td>
                   <td><input type="text" name="quantidade1" size="5" class="effect" onkeyup="up(this)" id="quantidade1"/></td>
                   <td><input type="text" name="uni1" size="8" class="effect" onkeyup="up(this)"/></td>
                   <td><input type="text" name="custo1" size="5" class="effect soma" onBlur="calculateSum();"/></td>
                   <td align="center"><a href="" id="menos" onBlur="calculateSum();"><img src="resources/images/menos.png" border="0" /></a></td>
               </tr>

               <input type="hidden" value="1" name="quantidade_itens" />
           </table>
           <tr>     </tr>

           <tr>
           <h1>TOTAL PEDIDO</h1><hr>
           </tr>
           <table border="0">
               <tr>
                   <td colspan="6"> </td>
               </tr>
               <tr>
                   <td> </td>
                   <td valign="top">Observações:</td>
                   <td rowspan="3"><label for="textarea"></label>
                       <textarea name="obs" id="textarea" cols="45" rows="5"></textarea></td>
                   <td> </td>
                   <td>Sub-Total:</td>
                   <td id ="sub"><span id="vl" style="color:#F00;">0</span>  </td>
               </tr>
               <tr>
                   <td> </td>
                   <td> </td>
                   <td> </td>
                   <td>% Acréscimo:</td>
                   <td><input name="acrescimo" type="text" class="effect" id="per" value="" size="15" onBlur="soma();" /></td>
               </tr>
               <tr>
                   <td> </td>
                   <td> </td>
                   <td> </td>
                   <td>Total:</td>
                   <td><input name="total" style="color:#F00;" type="text" class="effect" id="pesobruto3" value="" size="15" /></td>
               </tr>
               <tr>
                   <td> </td>
                   <td colspan="5" align="center"><input type="submit" name="button2" id="button2" value="Fechar Pedido" /></td>
               </tr>
           </table>
       </form>

   </fieldset>

</div>

Codigo do javascript que faz o acréscimo da linha toda fez que o botão e clicado

esta funcionado normal só não faz o auto-complete que já está adicionado na pagina html

já tentei colocar o script de auto complete nesta pagina e nao funcionou

add.js

// JavaScript Document
$(function(){

   $('#mais').click(function(){

       var next = $('#lista tbody').children('tr').length + 1;


       $('#lista tbody').append('<tr class="remover'+next+'">' +


           '<td><input type="text" name="item' + next + '" size="70" class="effect auto" onkeyup="up(this)" /></td>' + 
           '<td><input type="text" name="quantidade' + next + '" size="5" class="effect" onkeyup="up(this)"/></td>' +
           '<td><input type="text" name="uni' + next + '" size="8" class="effect" onkeyup="up(this)" /></td>' +
           '<td><input type="text" name="custo' + next + '" size="5" id="soma'+next+'" class="effect soma" onBlur="calculateSum();"/></td>' +
           '<td align="center" id="menos'+ next +'"><a href="#" onclick ="$(this).parent().parent().remove(); calculateSum();"><img src="resources/images/menos.png" border="0"/></a></td>'+
           '</tr>');

       $(':hidden').val(next);

       return false;
   });

   $('form').submit(function(){

       var parametros = $(this).serialize();

       $.get(
           $(this).attr('action'),
           parametros,
           function(data){
               $('#resultado').empty().append(data);
           },
           "html"
           )

       return false;

   });

   $('#enviar').click(function(){
       $('form').submit();
   });

   $(':text').live('focus',function(){
       $(this).closest('tr').addClass('input-focus');
   }).live('blur',function(){
       $(this).closest('tr').removeClass();
   });

   $("#menos").click(function(){
       if($("tr").length == 1){
           alert("nao e possível remover todas as combos")
       }else{
           $("tr:last").remove();
       }
   });

});

William Bruno · Agosto 22, 2012

isso é pq o plugin não foi associado ao novo elemento. É o mesmo problema que apresento aqui:

http://wbruno.com.br/2011/08/22/usando-lightbox-em-pagina-carregada-ajax/

junaooaks · Agosto 22, 2012

isso é pq o plugin não foi associado ao novo elemento. É o mesmo problema que apresento aqui:

http://wbruno.com.br/2011/08/22/usando-lightbox-em-pagina-carregada-ajax/

suspeitei que teria que carregar o DOM só não sei como ainda.

testando a minha ignorância coloquei assim

<script type="text/javascript">
 $(document).ready(function()     {

   $('.auto').autocomplete(
   {

     source: "app/view/ajax.php",
    minLength: 1
   });
 });

 $(document).ready(function() {  
   $('.auto').load('app/view/forNF.php',   
       function(){  
           $('#input').textarea();  
       }  
   );  
});  

</script>

como será de esperar deu erro :ermm:

poderia me explicar como complementar ?

William Bruno · Agosto 22, 2012

hum.. você não entendeu. Veja aqui você faz o append, certo:

 $('#lista tbody').append('<tr class="remover'+next+'">' +

logo depois disso você tem q instanciar o teu plugin.

junaooaks · Agosto 22, 2012

eu to ficando de meolo mole :blush:

$('.auto').autocomplete() +

bruno

nao consegui, não peguei a ideia ainda podia me ajudar ;)

William Bruno · Agosto 22, 2012

algo assim,amigo:

 $('#lista tbody').append('<tr class="remover'+next+'">' +
//...

$('.remover'+next).find('.auto').autocomplete(
   {

     source: "app/view/ajax.php",
    minLength: 1
   });

entendeu ?

junaooaks · Agosto 22, 2012

Bruno

já usei: find,load,append

removi: $('.remover'+next).find('.auto').autocomplete(...

deixando assim : $('.auto').autocomplete(...

já tomei café :clap: viva a cafeina

mas sem solução, teria mais alguma opinião ?

William Bruno · Agosto 22, 2012

é da forma que eu mostrei. O load é para outra coisa.

como ficou o código depois q você fez exatamente oq eu postei ?

junaooaks · Agosto 22, 2012

é da forma que eu mostrei. O load é para outra coisa.

como ficou o código depois q você fez exatamente oq eu postei ?

$('#mais').click(function(){

       var next = $('#lista tbody').children('tr').length + 1;


       $('#lista tbody').append('<tr class="remover'+next+'">' +
       //....  

       $('.remover'+next).find('.auto').autocomplete(
   {
     source: "app/view/ajax.php",
    minLength: 1
   })
           +
           '<!--td><input class="effect auto ui-autocomplete-input" type="text" onkeyup="up(this)" size="70" name="item' + next + '" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"/></td-->'+


           '<td><input type="text" name="item' + next + '" size="70" class="effect auto" onkeyup="up(this)" /></td>' + 
           '<td><input type="text" name="quantidade' + next + '" size="5" class="effect" onkeyup="up(this)"/></td>' +
           '<td><input type="text" name="uni' + next + '" size="8" class="effect" onkeyup="up(this)" /></td>' +
           '<td><input type="text" name="custo' + next + '" size="5" id="soma'+next+'" class="effect soma" onBlur="calculateSum();"/></td>' +
           '<td align="center" id="menos'+ next +'"><a href="#" onclick ="$(this).parent().parent().remove(); calculateSum();"><img src="resources/images/menos.png" border="0"/></a></td>'+
           '</tr>');

       $(':hidden').val(next);

       return false;
   });

William Bruno · Agosto 22, 2012

não não... aquilo era um pseudocódigo..

num é bem assim ne?!

       $('#lista tbody').append('<tr class="remover'+next+'">' +


           '<td><input type="text" name="item' + next + '" size="70" class="effect auto" onkeyup="up(this)" /></td>' + 
           '<td><input type="text" name="quantidade' + next + '" size="5" class="effect" onkeyup="up(this)"/></td>' +
           '<td><input type="text" name="uni' + next + '" size="8" class="effect" onkeyup="up(this)" /></td>' +
           '<td><input type="text" name="custo' + next + '" size="5" id="soma'+next+'" class="effect soma" onBlur="calculateSum();"/></td>' +
           '<td align="center" id="menos'+ next +'"><a href="#" onclick ="$(this).parent().parent().remove(); calculateSum();"><img src="resources/images/menos.png" border="0"/></a></td>'+
           '</tr>');

       $('.remover'+next).find('.auto').autocomplete(
       {
           source: "app/view/ajax.php",
           minLength: 1
       })

entendeu???

junaooaks · Agosto 22, 2012

:clap: entendi

a alteração e esta mesmo, teria que funcionar desta forma ?

 $('#mais').click(function(){

       var next = $('#lista tbody').children('tr').length + 1;


       $('#lista tbody').append('<tr class="remover'+next+'">' +

           '<td><input class="effect auto ui-autocomplete-input" type="text" onkeyup="up(this)" size="70" name="item' + next + '" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"/></td>'+


           '<!--td><input type="text" name="item' + next + '" size="70" class="effect auto" onkeyup="up(this)" /></td-->' + 
           '<td><input type="text" name="quantidade' + next + '" size="5" class="effect" onkeyup="up(this)"/></td>' +
           '<td><input type="text" name="uni' + next + '" size="8" class="effect" onkeyup="up(this)" /></td>' +
           '<td><input type="text" name="custo' + next + '" size="5" id="soma'+next+'" class="effect soma" onBlur="calculateSum();"/></td>' +
           '<td align="center" id="menos'+ next +'"><a href="#" onclick ="$(this).parent().parent().remove(); calculateSum();"><img src="resources/images/menos.png" border="0"/></a></td>'+
           '</tr>');

       $(':hidden').val(next);

       return false;
   });

   $('.remover'+next).find('.auto').autocomplete(
   {
     source: "app/view/ajax.php",
    minLength: 1
   });

mas não funciona :cry:

ja sei será se carregar novamente o jquery resolve

tentar

William Bruno · Agosto 22, 2012

ta errado amigo.. olha novamente o meu código.

você colocou no lugar errado.

junaooaks · Agosto 22, 2012

cara d+ :clap: funcionou, to meio :wacko: hoje

cara de agradeço do coração, mandei um ponto positivo.

obrigado

:bye: :clap: :lol:

Arquivado

[Resolvido] autocomplete por class

Recommended Posts

junaooaks 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ted k' 126

Compartilhar este post

Link para o post

Compartilhar em outros sites

junaooaks 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

junaooaks 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

junaooaks 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

junaooaks 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

junaooaks 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

junaooaks 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

junaooaks 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Fóruns

Tempo Real

Informação importante