Auto Complete ASP CLASSIC

Gilberto Jr · Novembro 7, 2014

Bom dia,

Eu estou achando estranho esse auto complete que estou usando. Segue o código jquery.

<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>

Agora segue o código ASP CLASSIC

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
Response.AddHeader "Content-Type", "text/html; charset=utf-8"
Response.AddHeader "Pragma", "no-cache"
response.Charset="utf-8"
%>
<%
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;")
	'arquivo que checa se existe o login e a senha do usuario que esta tentando logar
	
	' Pega valor
	valor = Request.QueryString("valor")
	
	' SQL de pesquisa
	sql = "SELECT razao_nome FROM clientes WHERE UPPER(razao_nome) like UPPER('"&valor&"%') ORDER BY razao_nome ASC"
	Set query = conn.execute(sql)
	Do While Not query.eof
		' Lista o nome
		response.write query("razao_nome")&vbCrLf
		query.movenext
	Loop
	
	Set query = Nothing
	Set conn = Nothing
%>

Quando eu digito algum nome que não tem no banco de dados o sistema traz todos os nomes que tem cadastrado.

E também coloquei para buscar a partir do inicio e não esta indo.

Por exemplo, tem vários nomes que tem a letra "G" porem o único que inicia com a letra "G" é o "GILBERTO" e quando digito a letra "G" no campo de pesquisa ele traz todos os nomes inclusive os que não tem a letra "G".

Algum já passou por esse problemas e conseguiu resolver?

Att;

xanburzum · Novembro 7, 2014

tenta tirar o UPPER da SQL junto no LIKE, se for SQL Server aceita UPPER senão troque pelo UCASE

Gilberto Jr · Novembro 7, 2014

Xan

Deixei a minha sql assim

sql = "SELECT razao_nome FROM clientes WHERE UCASE(razao_nome) like '"&valor&"%' ORDER BY razao_nome ASC"

Troquei o UPPER pelo UCASE pois uso o mysql e mesmo assim continua não dando certo.

Att;

PRSolucaoWeb · Novembro 7, 2014

Tenta utilizar esse:

<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">
<span class="textfieldRequiredMsg"><br>
*CAMPO OBRIGATÓRIO</span></span>
<% While Not filtro.EOF %>
<%
razao_social = razao_social & "'" & filtro ("razao_social") & "'" & ", "

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:Tahoma;font-size:12;color:#000000;background:#CCCCCC;}'+
'<\/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></td>
</tr>
<tr class="texto">
<td height="55" style="font-size: 13px"><span class="style9 style6 style41">FANTÁSIA:</span></td>
<td><input name="fantasia" class="campos_filtro" id="fantasia" onBlur="remFinal(this.value,this)" onKeyUp="checkList(this, arvore2, event);Muda(this);" value="" size="30">
<% While Not filtro2.EOF %>
<%
fantasia = fantasia & "'" & filtro2 ("fantasia") & "'" & ", "

filtro2.MoveNext
Wend
'filtro.close
%>
<script>
var arvore2 = new Array(<%=fantasia%>"");

document.write('<style type="text/css">'+
'#listHolder1{position:absolute;border:0;}'+
'.list{font-family:Tahoma;font-size:14;color:#000000;background:#CCCCCC;}'+
'<\/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('listHolder1');

if(!list) {
var list = document.createElement('DIV');
list.id = 'listHolder1';
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(\'listHolder1\').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('listHolder1').style.display='none'
}
}
}
}

function setOption(obj,val){

var obj=document.getElementById(obj)

obj.value=val;
obj.focus()
document.getElementById('listHolder1').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>

Gilberto Jr · Novembro 7, 2014

PRSolucaoWeb, funcionou do jeito que eu queria.

Mas agora eu to implementado no meu site e quando eu digito algo que encontra ele esta mostrando mas o select esta do lado esquerdo da pagina. E eu gostaria que ele ficasse centralizado dentro da div que esta o campo de busca.

Veja a imagem como esta aparecendo.

Tem como arrumar?

Att;

xanburzum · Novembro 8, 2014

altere no CSS

Gilberto Jr · Novembro 8, 2014

Estranho, consegui arrumar e colocar ele centralizado;

Porem meu script esta dentro de um fieldset e o mesmo não ficando dentro da minha div #conteudo -> fieldset.

Segue o meu script javascript

<script>
var arvore = new Array(<%=razao_social%>"");

//document.write('<style type="text/css">'+
//'#listHolder{border:1px solid #f00;height:auto;width:300px;}'+
//'.list{font-family:Calibri;font-size:12;color:#000;background:#fff;height:auto;border:none;margin:auto;width:300px;}'+
//'<\/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>

Agora segue o meu codigo CSS

<style type="text/css">
#listHolder{
	border:1px solid #f00;
	height:auto;
	width:300px;
	margin:auto;
	}
.list{
	font-family:Calibri;
	font-size:12;
	color:#000;
	background:#fff;
	height:auto;
	border:none;
	margin:auto;
	width:300px;
}
</style>

Segue a imagem de como esta ficando

Alguém sabe por de não esta ficando dentro da div #conteudo e da fieldset?

Att;

xanburzum · Novembro 10, 2014

vc testou em qual browser ? ou quais ?

Gilberto Jr · Novembro 20, 2014

Eu tenho costume de usar o chrome e fiz o teste no mozila pra ver se a configuração do meu CSS esta funcionado nos dois browser.

Att;

Bom dia;

Alguém pode me ajudar nesse problema?

Att;

Arquivado

Auto Complete ASP CLASSIC

Recommended Posts

Gilberto Jr 26

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilberto Jr 26

Compartilhar este post

Link para o post

Compartilhar em outros sites

PRSolucaoWeb 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilberto Jr 26

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilberto Jr 26

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilberto Jr 26

Compartilhar este post

Link para o post

Compartilhar em outros sites

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Saber se todos os produtos de uma consulta estão cadastrados no banco de dados

Fóruns

Tempo Real

Informação importante