Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Douglas Fernando

Posicionamento da Lista do Widget AutoComplete da JQueryUI

Por , em Javascript

Recommended Posts

Douglas Fernando    0

Douglas Fernando
Postado

Boa noite a todos.

 

Estou com um problema com relação ao posicionamento da lista de sugestões do Widget "AutoComplete" da JqueryUI.

 

O problema é o seguinte: Quando aparece as sugestões, ela aparece sempre do lado esquerdo superior da tela e aparece toda a lista, e não as palavras que contenham a string digitada no input do formulário. Entende ?

 

Segue abaixo o meu código,já tentei colocar o position:{my:"center",at:"center"} e nada. Existe algumas validações que fiz no formulário, mas não estão valendo pois estão comentadas:

<!DOCTYPE html>
<html lang="pt-br">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>
    Painel de Administração
  </title>
  <link type="text/css" rel="stylesheet" href="estilo_insere_produtos.css">
  <!-- Inclusão do Jquery -->
  <script type="text/javascript" src="JQueryValidate/JQueryv1.4.1.js" ></script>
  <!-- Inclusão do Jquery Validate -->
  <script type="text/javascript" src="JQueryValidate/Validation.v1.6.js" ></script>
  <script type="text/javascript" src="JQueryValidate/MaskMoney.js" ></script>
  <!--Plugin FancyBox(serve para abrir janelas com efeito)-->
  <script type="text/javascript" src="js/FancyBox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
  <script type="text/javascript" src="js/FancyBox/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.11.0.custom/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="js/jquery-ui-1.11.0.custom/jquery-ui.css" type="text/css"/>
  <link rel="stylesheet" href="js/FancyBox/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
  <script type="text/javascript">
    $(document).ready(function(){
    
      /*$('#form_insere_prod').validate({
            rules:{
                produto_nome:{
                    required: true,
                    minlength: 3
                },
                produto_custo: {
                    required: true,
                    
                    
                },
                produto_venda: {
                    required: true,
                    
                },
                produto_secao:{
                   required:true,
                },
                
            messages:{
                produto_nome:{
                    required: "O campo nome é obrigatorio.",
                    minlength: "O campo nome deve conter no mínimo 3 caracteres."
                },
                produto_custo: {
                    required: "O campo custo é obrigatorio.",
                    
                },
                
                produto_secao: {
                    required: "Selecione uma seção",
                    
                },
                 produto_venda: {
                    required: "O campo Preço de venda é obrigatorio."
                },
               
                     }
            
                   }
             
        });
      
      $('#produto_custo,#produto_venda').maskMoney({showSymbol:true, symbol:"R$", decimal:".", thousands:".",affixesStay:false,prefix:"R$ "});
      $("#produto_secao").focus(function(){
      
         var custo = $("#produto_custo").val();
         var venda = $("#produto_venda").val();
         var lucro = venda-custo;
         var lucro = lucro.toFixed(2);
         if(lucro<0){
        
           $("#produto_lucro").attr('value',"R$ "+lucro);
           $("#produto_lucro").css('color','red');
           alert("O preço de venda é menor que o de Custo\nConserte o preço de Venda");
           $("#produto_venda").focus();
        
         }
         else if(lucro == 0){
        
            $("#produto_lucro").attr('value',"R$ "+lucro);
            $("#produto_lucro").css('font-weight','bold');
            alert("O preço de venda é igual ao de Custo\nConserte o preço de Venda");
            $("#produto_venda").focus();
        
         }
         else {
            $("#produto_lucro").css('color','black');
            $("#produto_lucro").attr('value',"R$ "+lucro);
         }
      
      });*/
      //Passa por parametro o Código do Produto:
      /*$('#produto_codigo').blur(function(){
           numero_digitado = $('#produto_codigo').val();
           $.post(
                   'consulta_produto.php',
                    {codigo_produto:numero_digitado},
                    function(data){
                    
                       $('#produto_nome').attr('value',data);
                    
                    }
                  );
      
      });*/
      
      //Função para requisitar os dados do Produto:
      /*$('#produto_codigo').blur(function(){
                 if($('#produto_codigo').val() == ""){
                
                      
                      alert("Favor insira o código do produto para consulta!");
                      $('#produto_codigo').focus();
                      $('#produto_codigo').css('background','#6699cc');
                      $('#produto_codigo').css('color','white');
                      
                      $('#produto_codigo').keydown(function(){
                      
                          $('#produto_codigo').css('background','white');
                          $('#produto_codigo').css('color','black');
                      
                      });
                
                 }
                 else{
                 numero_digitado = $('#produto_codigo').val();
                 nome_digitado   = $('#produto_nome').val();
                 //alert(nome_digitado);
                 $('.load').css('display','block');
                 
                
               $.getJSON(
                 'consulta_produto.php',
                  {codigo:numero_digitado,nome:nome_digitado},
                  function(data){
                    //$('#produto_codigo').attr('disabled','disabled');
                    if(data == ''){
                        alert("Não existe produto cadastrado\ncom este código!");
                        $('#produto_codigo').css('background','#6699cc');
                        $('#produto_codigo').css('color','white');
                        $('#produto_codigo').focus();
                        $('#produto_codigo').keydown(function(){
                      
                          $('#produto_codigo').css('background','white');
                          $('#produto_codigo').css('color','black');
                      
                      });
                    }
                    $('.load').css('display','none');
                    $('#produto_codigo').attr('value',data.prod_cod);
                    $('#produto_nome').attr('value',data.prod_nome);
                    $('#produto_custo').attr('value',data.prod_custo);
                    $('#produto_venda').attr('value',data.prod_venda);
                    $('#produto_lucro').attr('value',data.prod_lucro);
                    $('#produto_estoque').attr('value',data.prod_estoque);
                    $('#produto_secao').attr('value',data.prod_secao);
                    $('#produto_foto').attr('value',data.prod_foto);
                  }      
                );
      }
      
      });*/
      
      //Instruções para FancyBox:
      /*$(".pesquisar").fancybox({
          'type'             : 'iframe',
          'transitionIn'    :    'elastic',
          'autoDimensions'  :    false,
          'scrolling'        :   'auto',
          'transitionOut'    :    'elastic',
          'speedIn'            :    1000,
          'speedOut'        :    1000,
          'overlayShow'        :    true,
          'height'          :   700,
          'width'           :   '80%',
          'autoScale'       :    true,
          'centerOnScroll'  : true,
          'showCloseButton' : false
          
          
       });*/
      
       //JQueryUI Widget AutoComplete:
       $("#produto_nome").autocomplete({
            
                source:"consulta_produto.php"
            
             });//Fim do AutoComplete
      
    });//Fechamento do $(document).ready(function(){});  
  </script>
 </head>
 <body>
    <!--Inclusão de Arquivo PHP-->
    <?php include "conexao.php"; ?>
    
    <content>
      <h3>Alterando Produtos</h3>
        
        <form id="form_insere_prod" name="form_insere_prod" method="post" action="alterando_produtos.php" enctype="multipart/form-data">
          <label>Código:</label><br>
          <input type="text" name="produto_codigo" id="produto_codigo" placeholder="Informe o código(somente números)" ><a class='pesquisar' href=' style="position:absolute;cursor:pointer;z-index:10;right:24%;top:-16px;display:block;float:right;width:52px;height:auto;"><img class="pesquisa_codigo" src="imagem/pesquisar.jpg" title="Clique aqui para exibir a lista de produtos." style="position:relative;width:100%;" ></a><br>
          <label>Nome:</label><br>
          <input type="text" name="produto_nome" id="produto_nome"><div class="load" style="position:absolute;z-index:10;right:24%;top:100px;display:none;float:right;"><img src="imagem/89.gif"></div><br>
          <label>Custo:</label><br>
          <input type="text" name="produto_custo" id="produto_custo" placeholder="Ex: 1.99"><div class="load" style="position:absolute;z-index:10;right:24%;top:170px;display:none;float:right;"><img src="imagem/89.gif"></div><br>
          <label>Venda:</label><br>
          <input type="text" name="produto_venda" id="produto_venda" placeholder="Ex: 3.99"><div class="load" style="position:absolute;z-index:10;right:24%;top:240px;display:none;float:right;"><img src="imagem/89.gif"></div><br>
          <label>Lucro:</label><br>
          <input type="text" name="produto_lucro" id="produto_lucro"  disabled><div class="load" style="position:absolute;z-index:10;right:24%;top:310px;display:none;float:right;"><img src="imagem/89.gif"></div><br>
          <label>Estoque:</label><br>
          <input type="text" name="produto_estoque" id="produto_estoque"><div class="load" style="position:absolute;z-index:10;right:24%;top:380px;display:none;float:right;"><img src="imagem/89.gif"></div><br>
          <label>Seção:</label><br><div class="load" style="position:absolute;z-index:10;right:24%;top:455px;display:none;float:right;"><img src="imagem/89.gif"></div>
          <select name="produto_secao" id="produto_secao">
            <option value="">Escolha uma seção</option>
            <option value="Memória RAM">Memória RAM</option>
            <option value="Placa de Vídeo">Placa de Vídeo</option>
            <option value="Placas-mãe">Placas-mãe</option>
            <option value="Monitores">Monitores</option>
            <option value="Placas de Rede">Placas de Rede</option>
            <option value="Gravador de DVD">Gravador de DVD</option>
            <option value="Armazenamento">Armazenamento</option>
            <option value="Mouse">Mouse</option>
            <option value="Teclado">Teclado</option>
            <option value="Computador Completo">Computador Completo</option>
            <option value="Roteadores">Roteadores</option>
            <option value="Leitor_de_Cartão_de_Memória">Leitor de Cartão de Memória</option>
            <option value="Impressoras">Impressoras</option>
          </select><br>
          
          <label>Imagem:</label><br>
          <input type="file" name="produto_foto" id="produto_foto"><div class="load" style="position:absolute;z-index:10;right:24%;top:533px;display:none;float:right;"><img src="imagem/89.gif"></div><br>
          
          <input type="submit" name="btn-insere_prod" id="btn-insere_prod" value="Alterar Produto" ><br>
        </form>
        
      <div class="clear"></div>
    </content>
    <!--<script type="text/javascript">
       $("#btn-insere_prod").click(function verificaExtensao(){
       
          nome = $("#produto_foto").val();//Peguei o nome do arquivo.
          nome  = (nome.substring(nome.lastIndexOf("."))).toLowerCase();//Extrai a extensão
          //alert("A extensão do arquivo é:\n"+nome);//Alertei na tela para mim ver se realmente extrai
          var extensoes = new Array(".jpeg",".jpg",".png",".gif");//Vetor com as extensões permitidas
          
          if (nome == ""){
          
            decisao = confirm("Faltou você selecionar uma foto do tipo:"+extensoes.join(" / ")+"\nDeseja alterar o produto sem mecher na foto ?");
            if(decisao){
                  alert("Ok , vou enviar o formulário SEM ALTERAR A FOTO.");
                  return true;
               }
            else {
            
              return false;
              $("#produto_foto").focus();
            
            }
            
          }
          else if (nome!=""){
          
                for(i=0;i<extensoes.length;i++)
                {
                  
                  if(nome == extensoes[i])
                   {
                     permicao = true;
                     alert("Arquivo válido!\nVou enviar o Formulário...");
                    
                     $("#form_insere_prod").submit();
                     return true;
                   }
                   
                   continue;
                   
                  
                }
                
                
                for(i=0;i<extensoes.length;i++)
                {
                  
                  if(nome != extensoes[i])
                   {
                     permicao = false;
                     alert("Arquivo inválido!\nTente outro arquivo do tipo: "+extensoes.join(" / "));
                     break;
                    
                   }
                   
                   continue;
                   
                  
                }
                
                }
          
          
          
          
       });
       
    
    //$('tr:even').css('background','silver');
    </script>-->
    
    <!--<script type="text/javascript">
         function onlyDigits(evt) { //Não deixa digitar numeros
 
 
         var charCode = (evt.which) ? evt.which : event.keyCode           
          if (charCode > 31 && (charCode < 48 || charCode > 57))  
            return true;  
            return false;   
 
          }  
   </script> -->
   
 </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marlon Pacheco    132

Marlon Pacheco
Postado

Cara, não consegui simular o erro. Estou achando que pode ser culpa desses CSS inline.

Consegue colocar o código no Codepen?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Fernando    0

Douglas Fernando
Postado

Cara, não consegui simular o erro. Estou achando que pode ser culpa desses CSS inline.

Consegue colocar o código no Codepen?

Marlon , sou novo aqui no fórum, esse Codepen seria para você poder editar o arquivo no própio fórum afim de você fazer os testes ?

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>
Painel de Administração
</title>
<link type="text/css" rel="stylesheet" href="estilo_insere_produtos.css">
<!-- Inclusão do Jquery -->
<script type="text/javascript" src="JQueryValidate/JQueryv1.4.1.js" ></script>
<!-- Inclusão do Jquery Validate -->
<script type="text/javascript" src="JQueryValidate/Validation.v1.6.js" ></script>
<script type="text/javascript" src="JQueryValidate/MaskMoney.js" ></script>
<!--Plugin FancyBox(serve para abrir janelas com efeito)-->
<script type="text/javascript" src="js/FancyBox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/FancyBox/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.0.custom/jquery-ui.min.js"></script>
<link rel="stylesheet" href="js/jquery-ui-1.11.0.custom/jquery-ui.css" type="text/css"/>
<link rel="stylesheet" href="js/FancyBox/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){

/*$('#form_insere_prod').validate({
rules:{
produto_nome:{
required: true,
minlength: 3
},
produto_custo: {
required: true,


},
produto_venda: {
required: true,

},
produto_secao:{
required:true,
},

messages:{
produto_nome:{
required: "O campo nome é obrigatorio.",
minlength: "O campo nome deve conter no mínimo 3 caracteres."
},
produto_custo: {
required: "O campo custo é obrigatorio.",

},

produto_secao: {
required: "Selecione uma seção",

},
produto_venda: {
required: "O campo Preço de venda é obrigatorio."
},

}

}

});

$('#produto_custo,#produto_venda').maskMoney({showSymbol:true, symbol:"R$", decimal:".", thousands:".",affixesStay:false,prefix:"R$ "});
$("#produto_secao").focus(function(){

var custo = $("#produto_custo").val();
var venda = $("#produto_venda").val();
var lucro = venda-custo;
var lucro = lucro.toFixed(2);
if(lucro<0){

$("#produto_lucro").attr('value',"R$ "+lucro);
$("#produto_lucro").css('color','red');
alert("O preço de venda é menor que o de Custo\nConserte o preço de Venda");
$("#produto_venda").focus();

}
else if(lucro == 0){

$("#produto_lucro").attr('value',"R$ "+lucro);
$("#produto_lucro").css('font-weight','bold');
alert("O preço de venda é igual ao de Custo\nConserte o preço de Venda");
$("#produto_venda").focus();

}
else {
$("#produto_lucro").css('color','black');
$("#produto_lucro").attr('value',"R$ "+lucro);
}

});*/
//Passa por parametro o Código do Produto:
/*$('#produto_codigo').blur(function(){
numero_digitado = $('#produto_codigo').val();
$.post(
'consulta_produto.php',
{codigo_produto:numero_digitado},
function(data){

$('#produto_nome').attr('value',data);

}
);

});*/

//Função para requisitar os dados do Produto:
/*$('#produto_codigo').blur(function(){
if($('#produto_codigo').val() == ""){


alert("Favor insira o código do produto para consulta!");
$('#produto_codigo').focus();
$('#produto_codigo').css('background','#6699cc');
$('#produto_codigo').css('color','white');

$('#produto_codigo').keydown(function(){

$('#produto_codigo').css('background','white');
$('#produto_codigo').css('color','black');

});

}
else{
numero_digitado = $('#produto_codigo').val();
nome_digitado = $('#produto_nome').val();
//alert(nome_digitado);
$('.load').css('display','block');


$.getJSON(
'consulta_produto.php',
{codigo:numero_digitado,nome:nome_digitado},
function(data){
//$('#produto_codigo').attr('disabled','disabled');
if(data == ''){
alert("Não existe produto cadastrado\ncom este código!");
$('#produto_codigo').css('background','#6699cc');
$('#produto_codigo').css('color','white');
$('#produto_codigo').focus();
$('#produto_codigo').keydown(function(){

$('#produto_codigo').css('background','white');
$('#produto_codigo').css('color','black');

});
}
$('.load').css('display','none');
$('#produto_codigo').attr('value',data.prod_cod);
$('#produto_nome').attr('value',data.prod_nome);
$('#produto_custo').attr('value',data.prod_custo);
$('#produto_venda').attr('value',data.prod_venda);
$('#produto_lucro').attr('value',data.prod_lucro);
$('#produto_estoque').attr('value',data.prod_estoque);
$('#produto_secao').attr('value',data.prod_secao);
$('#produto_foto').attr('value',data.prod_foto);
}
);
}

});*/

//Instruções para FancyBox:
/*$(".pesquisar").fancybox({
'type' : 'iframe',
'transitionIn' : 'elastic',
'autoDimensions' : false,
'scrolling' : 'auto',
'transitionOut' : 'elastic',
'speedIn' : 1000,
'speedOut' : 1000,
'overlayShow' : true,
'height' : 700,
'width' : '80%',
'autoScale' : true,
'centerOnScroll' : true,
'showCloseButton' : false


});*/

//JQueryUI Widget AutoComplete:
$("#produto_nome").autocomplete({

source:"consulta_produto.php"

});//Fim do AutoComplete

});//Fechamento do $(document).ready(function(){});
</script>
</head>
<body>
<!--Inclusão de Arquivo PHP-->
<?php include "conexao.php"; ?>

<content>
<h3>Alterando Produtos</h3>

<form id="form_insere_prod" name="form_insere_prod" method="post" action="alterando_produtos.php" enctype="multipart/form-data">
<label>Código:</label><br>
<input type="text" name="produto_codigo" id="produto_codigo" placeholder="Informe o código(somente números)" ><a class='pesquisar' href=' style="position:absolute;cursor:pointer;z-index:10;right:24%;top:-16px;display:block;float:right;width:52px;height:auto;"><img class="pesquisa_codigo" src="imagem/pesquisar.jpg" title="Clique aqui para exibir a lista de produtos." style="position:relative;width:100%;" ></a><br>
<label>Nome:</label><br>
<input type="text" name="produto_nome" id="produto_nome"><div class="load" style="position:absolute;z-index:10;right:24%;top:100px;display:none;float:right;"><img src="imagem/89.gif"></div><br>
<label>Custo:</label><br>
<input type="text" name="produto_custo" id="produto_custo" placeholder="Ex: 1.99"><div class="load" style="position:absolute;z-index:10;right:24%;top:170px;display:none;float:right;"><img src="imagem/89.gif"></div><br>
<label>Venda:</label><br>
<input type="text" name="produto_venda" id="produto_venda" placeholder="Ex: 3.99"><div class="load" style="position:absolute;z-index:10;right:24%;top:240px;display:none;float:right;"><img src="imagem/89.gif"></div><br>
<label>Lucro:</label><br>
<input type="text" name="produto_lucro" id="produto_lucro" disabled><div class="load" style="position:absolute;z-index:10;right:24%;top:310px;display:none;float:right;"><img src="imagem/89.gif"></div><br>
<label>Estoque:</label><br>
<input type="text" name="produto_estoque" id="produto_estoque"><div class="load" style="position:absolute;z-index:10;right:24%;top:380px;display:none;float:right;"><img src="imagem/89.gif"></div><br>
<label>Seção:</label><br><div class="load" style="position:absolute;z-index:10;right:24%;top:455px;display:none;float:right;"><img src="imagem/89.gif"></div>
<select name="produto_secao" id="produto_secao">
<option value="">Escolha uma seção</option>
<option value="Memória RAM">Memória RAM</option>
<option value="Placa de Vídeo">Placa de Vídeo</option>
<option value="Placas-mãe">Placas-mãe</option>
<option value="Monitores">Monitores</option>
<option value="Placas de Rede">Placas de Rede</option>
<option value="Gravador de DVD">Gravador de DVD</option>
<option value="Armazenamento">Armazenamento</option>
<option value="Mouse">Mouse</option>
<option value="Teclado">Teclado</option>
<option value="Computador Completo">Computador Completo</option>
<option value="Roteadores">Roteadores</option>
<option value="Leitor_de_Cartão_de_Memória">Leitor de Cartão de Memória</option>
<option value="Impressoras">Impressoras</option>
</select><br>

<label>Imagem:</label><br>
<input type="file" name="produto_foto" id="produto_foto"><div class="load" style="position:absolute;z-index:10;right:24%;top:533px;display:none;float:right;"><img src="imagem/89.gif"></div><br>

<input type="submit" name="btn-insere_prod" id="btn-insere_prod" value="Alterar Produto" ><br>
</form>

<div class="clear"></div>
</content>
<!--<script type="text/javascript">
$("#btn-insere_prod").click(function verificaExtensao(){

nome = $("#produto_foto").val();//Peguei o nome do arquivo.
nome = (nome.substring(nome.lastIndexOf("."))).toLowerCase();//Extrai a extensão
//alert("A extensão do arquivo é:\n"+nome);//Alertei na tela para mim ver se realmente extrai
var extensoes = new Array(".jpeg",".jpg",".png",".gif");//Vetor com as extensões permitidas

if (nome == ""){

decisao = confirm("Faltou você selecionar uma foto do tipo:"+extensoes.join(" / ")+"\nDeseja alterar o produto sem mecher na foto ?");
if(decisao){
alert("Ok , vou enviar o formulário SEM ALTERAR A FOTO.");
return true;
}
else {

return false;
$("#produto_foto").focus();

}

}
else if (nome!=""){

for(i=0;i<extensoes.length;i++)
{

if(nome == extensoes[i])
{
permicao = true;
alert("Arquivo válido!\nVou enviar o Formulário...");

$("#form_insere_prod").submit();
return true;
}

continue;


}


for(i=0;i<extensoes.length;i++)
{

if(nome != extensoes[i])
{
permicao = false;
alert("Arquivo inválido!\nTente outro arquivo do tipo: "+extensoes.join(" / "));
break;

}

continue;


}

}




});


//$('tr:even').css('background','silver');
</script>-->

<!--<script type="text/javascript">
function onlyDigits(evt) { //Não deixa digitar numeros


var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return true;
return false;

}
</script> -->

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marlon Pacheco    132

Marlon Pacheco
Postado

http://codepen.io/pen/

Cole os códigos nesse site e salve, assim podemos ver o erro acontecendo.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito