Ir para conteúdo

Arquivado

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

Gilberto Jr

Auto Complete Com Campo Marcado

Recommended Posts

Pessoal, bom dia novamente;

 

Seguinte, no meu formulário eu tenho um campo checkbox "Cadastrado" e "Cliente" como mostra o código abaixo.

   <label style="float:left">

        <strong>Cadastrado:</strong><br />
      <input type="checkbox" name="codigo" onkeypress="return teclaEnter(this, event)" value="" />
      </label>
      <label style="float:left">
                
     <strong>Cliente:</strong><br />
         
    <input type="text" name="cliente" id="cliente" onkeypress="return teclaEnter(this, event)" value="" />
    </label>

E uso esse código abaixo para fazer o autocomplete no meu site.

<link href="css/jquery.autocomplete.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.3.js" language="javascript"></script>
<script src="js/jquery.autocomplete.js" language="javascript"></script>
       
<script type="text/javascript" language="javascript">			
$(document).ready(function(){
//Ao digitar executar essa função					   
$("#dadospesquisa").focus().autocomplete("lista_clientes.asp",{ 
	    minChars: 0 //Número minimo de caracteres para aparecer
    	, matchContains: true //Sempre aparecer somente os que tem relação ao digitado
		, scrollHeight: 220 //altura da lista dos nomes
		, selectFirst: false //vim como padrão o primeiro selecionado
	})
				
})
</script>

O que eu quero é o seguinte, se o campo cliente checkbox estiver marcado ele faz a busca com o autocomplete, se não estiver marcado não faz a busca.

 

Como eu poderia implementar os dois códigos para funcionar nesse formulário?

 

Se puderem me ajudar eu ficaria grato.

 

Att;

Compartilhar este post


Link para o post
Compartilhar em outros sites

Esse autocomplete eu peguei aqui no proprio imaster.

 

Tem esse outro autocomplete que uso tambem. Esse não é em jquery e sim e javascript.

 

Segue o codigo

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<%
dim conn
'Criamos o objeto de conexão
Set conn = Server.CreateObject("ADODB.Connection") 
 
'Abrimos uma conexão com o banco de dados - [IMPORTANTE] altere os dados abaixo com as informações de sua base de dados
'Abrimos uma conexão com o banco de dados - [IMPORTANTE] altere os dados abaixo com as informações de sua base de dados
conn.Open("DRIVER={MySQL ODBC 5.1 Driver};SERVER=localhost;PORT=3306;DATABASE=cplogistica;USER=cplogistica;PASSWORD=123456;OPTION=3;")

set filtro = conn.execute("SELECT razao_nome FROM clientes ORDER BY razao_nome ASC")
%>
<input type="checkbox" value="" name="cadastrado" />Cadastrado | 
Nome:
<input name="razao_social" class="campos_filtro" id="razao_social" onBlur="remFinal(this.value,this)" onKeyUp="checkList(this, arvore, event);Muda(this);" value="" size="30">
<% 
While Not filtro.EOF
%>
<%
razao_social = razao_social & "'" & filtro ("razao_nome") & "'" & ", "

filtro.MoveNext
Wend
'filtro.close
%>
<script>
var arvore = new Array(<%=razao_social%>"");

document.write('<style type="text/css">'+
'#listHolder{position:absolute;border:0;}'+
'.list{font-family:Calibri;font-size:12;color:#000;background:#fff;height:auto;border=none;}'+
'<\/style>')

function checkList(obj,nStr, e) {

var k = (window.Event) ? e.which : e.keyCode;
var T = findPosY(obj); //top
var L = findPosX(obj); //left
var list = document.getElementById('listHolder');

if(!list) {
var list = document.createElement('DIV');
list.id = 'listHolder';
document.body.appendChild(list);
}

list.style.top=(T+obj.offsetHeight);
list.style.left=L;
list.style.display='none';

var txt=obj.value;

if (txt) {
var str='<select class="list"'+
'onclick="setOption(\''+obj.id+'\',this.options[this.selectedIndex].value)"'+
'onkeyup="if(event.keyCode==13){setOption(\''+obj.id+'\','+
'this.options[this.selectedIndex].value)};if(event.keyCode==27){'+
'document.getElementById(\'listHolder\').style.display=\'none\';'+
'document.getElementById(\''+obj.id+'\').focus()};" id="selector" size="6">'
var match=false
for(a=0;a<nStr.length;a++){

if(txt.toLowerCase()==nStr[a].toLowerCase().substring(0,txt.length)){
match=true
str+=('<option value="'+nStr[a].replace(/\'/gi,'’')+'">'+nStr[a]+'</option>')
}
}

str+='</select>'
if(match){
list.innerHTML=str
list.style.display='block'
var sel=document.getElementById('selector')
if(k=='40') {
sel.focus()
}

if(k=='13'){
document.getElementById('listHolder').style.display='none'
}
}
}
}

function setOption(obj,val){

var obj=document.getElementById(obj)

obj.value=val;
obj.focus()
document.getElementById('listHolder').style.display='none'
}

function findPosX(obj){
var curleft=0;
if(obj.offsetParent) {

while(obj.offsetParent){
curleft+=obj.offsetLeft
obj=obj.offsetParent;
}
} else if(obj.x)
curleft+=obj.x;
return curleft;
}

function findPosY(obj){
var curtop=0;
if(obj.offsetParent){
while(obj.offsetParent){
curtop+=obj.offsetTop
obj=obj.offsetParent;
}
} else if(obj.y)
curtop+=obj.y;
return curtop;
}
</SCRIPT>

</body>
</html>

Att;

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tente usando o outro plugin e usando esse codigo:

 

$("#dadospesquisa").focus().autocomplete({
    source: function( request, response ) {
        if ($('input[type=checkbox]').is(':checked'))
            $.post('lista_clientes.asp', {texto: request.term}, response, 'json');
        else
            response([]);
    }
});

Compartilhar este post


Link para o post
Compartilhar em outros sites

A chamada dos arquivos jquery é esses mesmo que já tenho?

<link href="css/jquery.autocomplete.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.3.js" language="javascript"></script>
<script src="js/jquery.autocomplete.js" language="javascript"></script>

Att;

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu teria que fazer a chamada da função no input type=checkbox ou no input type=text?

 

Fiz dessa forma aqui

<link href="css/jquery.autocomplete.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.3.js" language="javascript"></script>
<script src="js/jquery.autocomplete.js" language="javascript"></script>
<script language="javascript" type="text/javascript">
$("#cliente").focus().autocomplete({
    source: function( request, response ) {
        if ($('input[type=checkbox]').is(':checked'))
            $.post('lista_clientes.asp', {texto: request.term}, response, 'json');
        else
            response([]);
    }
});
</script>
    <label style="float:left">

        <strong>Cadastrado:</strong><br />
      <input type="checkbox" name="codigo" id="cadastrado" onkeypress="return teclaEnter(this, event)" />
      </label>
      <label style="float:left">
                
     <strong>*Cliente:</strong><br />
         
    <input type="text" name="cliente" id="cliente" onkeypress="return teclaEnter(this, event)" value="" />
    </label>

E não deu certo...

 

Att;

Compartilhar este post


Link para o post
Compartilhar em outros sites

Vamos fazer alguns testes:

$("#cliente").focus().autocomplete({
    source: function( request, response ) {
        console.log($('#cadastrado').is(':checked'));
        if ($('#cadastrado').is(':checked')) {
            $.post('lista_clientes.asp', {texto: request.term}, function(data) {
                console.log(data);
                return response(data);
            }, 'json');
        } else {
            return response([]);
        }
    }
});

Execute isso e veja o que sai no console

Compartilhar este post


Link para o post
Compartilhar em outros sites

Também não foi.

 

Segue o como ficou o meu código.

<link href="css/jquery.autocomplete.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.3.js" language="javascript"></script>
<script src="js/jquery.autocomplete.js" language="javascript"></script>
<script language="javascript" type="text/javascript">
$("#cliente").focus().autocomplete({
    source: function( request, response ) {
        console.log($('#cadastrado').is(':checked'));
        if ($('#cadastrado').is(':checked')) {
            $.post('lista_clientes.asp', {texto: request.term}, function(data) {
                console.log(data);
                return response(data);
            }, 'json');
        } else {
            return response([]);
        }
    }
});
</script>
    <label style="float:left">

        <strong>Cadastrado:</strong><br />
      <input type="checkbox" name="codigo" id="cadastrado" onkeypress="return teclaEnter(this, event)" />
      </label>
      <label style="float:left">
                
     <strong>*Cliente:</strong><br />
         
    <input type="text" name="cliente" id="cliente" onkeypress="return teclaEnter(this, event)" value="" />
    </label>

Att;

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então, complica, preciso saber onde fica o site oficial desse plugin para podermos ver a documentação dele.

No outro plugin, tente isso:

function checkList(obj,nStr, e) {
    if (!$('#cadastrado').is(':checked')) return true;
    var k = (window.Event) ? e.which : e.keyCode;
    var T = findPosY(obj); //top
    var L = findPosX(obj); //left
    var list = document.getElementById('listHolder');

    if(!list) {
        var list = document.createElement('DIV');
        list.id = 'listHolder';
        document.body.appendChild(list);
    }
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

As informações que tem no inicio da pagina jquery.autocomplete.js são essas

/*
 * jQuery Autocomplete plugin 1.1
 *
 * Copyright (c) 2009 Jörn Zaefferer
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Revision: $Id: jquery.autocomplete.js 15 2009-08-22 10:30:27Z joern.zaefferer $
 */

Att;

Compartilhar este post


Link para o post
Compartilhar em outros sites

Boas vou aproveitar este topico visto que o problema parece ser o mesmo.

 

este script funciona assim:

<!doctype html>
<html lang="us">
<head>

</head>
<body>



	<input id="autocomplete" title="type "a"">





<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>

var availableTags = [
	"ActionScript",
	"AppleScript",
	"Asp",
	"BASIC",
	"C",
	"C++",
	"Clojure",
	"COBOL",
	"ColdFusion",
	"Erlang",
	"Fortran",
	"Groovy",
	"Haskell",
	"Java",
	"JavaScript",
	"Lisp",
	"Perl",
	"PHP",
	"Python",
	"Ruby",
	"Scala",
	"Scheme"
];
$( "#autocomplete" ).autocomplete({
	source: availableTags
});


</script>
</body>
</html>

mas quando o incluo na minha pagina nao faz nada, alguma ideia porque?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Faça uma verificação antes:

$('#cliente').on('keyup', function(){
    var cadastrado = $('#cadastrado').prop('checked');
    if(cadastrado){
        // AQUI DENTRO VAI SEU AUTOCOMPLETE
    }
});

Veja um exemplo - http://jsfiddle.net/angelorubin/05akLrdg

 

Espero que ajude.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia

angelorubin

 

Estou usando esse código que você postou o link http://jsfiddle.net/angelorubin/05akLrdg/ não estou conseguindo.

 

Segue o código da minha pagina.


<!DOCTYPE HTML>



<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		
<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
        
<script language="javascript" type="text/javascript">
var clientes = ['Marcelo', 'Carlos', 'Angelo', 'Marcos', 'Benedito'];
$('#cliente').prop('disabled','disabled');
$('#cadastrado').on('click',function(){
    $('#cliente').prop('disabled','');
    $('#cliente').on('keyup', function(){
        var cadastrado = $('#cadastrado').prop('checked');
        if(cadastrado){
            $(this).autocomplete({
                source: clientes,
                minLength: 3
            });
        }
        else {
            $(this).empty();
            $(this).autocomplete( "destroy" );
        }
    });
});
</script>
	</head>
	<body>

<div class="container">
    <form class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="codigo" id="cadastrado" />Cadastrado
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="cliente" class="col-xs-3 col-xs-3 col-sm-3 control-label">Cliente</label>
            <div class="col-xs-7 col-md-7 col-sm-7">
                <input type="text" class="form-control" name="cliente" id="cliente" />
            </div>
        </div>
    </form>
</div>
</html>

Att;

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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