Autocompletar campo com Recordset

rd111072 · Setembro 24, 2009

Boa tarde.

Estou tentando usar um autocompletar (um textfield que se autocompleta quando eu digito nele, tipo a busca do Google) modelo que peguei na web, mas com o conteúdo vindo de um recordset, isto é do banco de dados... Só que não autocompleta nem dá erro! Vejam:

sql = "SELECT paciente FROM tab_convenio"
Set rs = conexaoDB.Execute(sql)

Dim ItensColuna() 
ReDim ItensColuna(0)

                                                                                 
while not rs.EOF

        redim preserve ItensColuna(Ubound(ItensColuna)+1)
        ItensColuna(Ubound(ItensColuna)) = rs("paciente")

rs.movenext : wend
%>

<html>
<head>
<title>AUTO COMPLETAR</title>
</head>
<style>
input {
	font-family: Verdana;
	font-size: 11px;
	font-style: normal;
	color: #000000;
	background-color: #FFFFFF;
	border: 1px solid #666666;
}

</style>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<table width="100%" height="100%"  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="top">
	<h3 align="center"> </h3>
	<h3 align="center"> </h3>
	<h3 align="center"></h3>
	<h4 align="center">AUTO COMPLETAR</h4>
	<form method="post" name="" action="">
	<table width="443" border="1" align="center" cellpadding="8" cellspacing="0" class="BordaTable">
	  <tr> 
		<td align="center" width="427">
		  Criando um text AUTO COMPLETAR:<br><br><br>
		  Digite a Letra A: 
		  <input name="Tcodigos" onKeyUp="checkList(this,arvore)" id="textbox1">	
		</td>
	  </tr>
	</table>
	</body>
<script>   	
var arvore = new Array(<%=ItensColuna(i)%>);
			
document.write('<style type="text/css">'+
					  '#listHolder{position:absolute;border:0;}'+
					  '.list{font-family:verdana;font-size:10;color:#000000;background:;}'+
			 '<\/style>')

function checkList(obj,nStr) {

	var k = event.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>

O que está errado?

xanburzum · Setembro 24, 2009

ele naun gera nenhum erro !?!?

você desabilitou a opcaun de exibir mensagens amigaeis de erro HTTP, do browser

tem um o´timo exemplo de autocompletar no forum, pode te ajudar

rd111072 · Setembro 24, 2009

ele naun gera nenhum erro !?!?

você desabilitou a opcaun de exibir mensagens amigaeis de erro HTTP, do browser

tem um o´timo exemplo de autocompletar no forum, pode te ajudar

A opção mensagens amigáveis está desabilitada. Não é isso, visto que se eu deixar o código errado de propósito, o browser mostra o erro...

Qual é o exemplo? Link?

xanburzum · Setembro 24, 2009

dá uma pesquisada no lab. de scripts....

desisto · Setembro 24, 2009

nao vai aparecer erro pois é uma consuta via js

abra a sua pagina que faz a consulta e defina um valor pra buscar

tipo: autocomplete.asp?palavra=teste

isso mostrara o erro que impede d emontar a lista

rd111072 · Setembro 24, 2009

dá uma pesquisada no lab. de scripts....

"Nenhum resultado encontrado para 'autocompletar'."

Esse script funciona se a var arvore não fôr de valores do banco, mas com os valores do banco ainda não.

E é o que preciso...

xanburzum · Setembro 24, 2009

verifica nos artigos, pois eu sei k tem, pois eu colokei...

rd111072 · Setembro 24, 2009

verifica nos artigos, pois eu sei k tem, pois eu colokei...

Artigos? Poderia me passar o link?

desisto · Setembro 24, 2009

cara, faça o que falei que você vai descobrir o erro

rd111072 · Setembro 24, 2009

cara, faça o que falei que você vai descobrir o erro

Já fiz. Não deu nada, só recarregou a página.

xanburzum · Setembro 24, 2009

aki

rd111072 · Setembro 24, 2009

aki

Vou testar e posto o resultado. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

xanburzum · Setembro 24, 2009

ok, beleza

rd111072 · Setembro 25, 2009

ok, beleza

Bom, legal o artigo...

Mas como faço isso interagir com meu banco de dados?

Porque script por script o que eu tenho já autocompleta, mas sem buscar do banco de dados.

Alguém sabe???

xanburzum · Setembro 25, 2009

olha este exemplo

em um banco chamado

country.mdb

tabela master, campos:

ID - Numeração Automática

name - Texto

ajax-dynamic-list.js

<%
    Response.Buffer = True
    Response.Clear
    
    ' definir o diretório que contém os arquivos aqui
    strFileName = Server.MapPath( "/set/path/here/" & Request.QueryString( "file" ) )
    
    Set Sys = Server.CreateObject( "Scripting.FileSystemObject" )
    Set Bin = Sys.OpenTextFile( strFileName, 1, False )
    If Sys.FileExists( strFileName ) Then
        
        '  Defina o nome de arquivo para salvar como
        Call Response.AddHeader( "Content-Disposition", "attachment; filename=" & strFileName )
        
        ' Certifique-se de downloads do navegador, em vez de executá-lo
        Response.ContentType = "application/octet-stream"
        
        ' Enviar como um binário Byte Stream
        While Not Bin.AtEndOfStream
            Response.BinaryWrite( ChrB( Asc( Bin.Read( 1 ) ) ) )
        Wend
    Else
        Response.Redirect( "erro.html" )
    End If
    Bin.Close : Set Bin = Nothing
    Set Sys = Nothing
%>

ajax.js

/* Simple AJAX Code-Kit (SACK) v1.6.1 */


function sack(file) {
	this.xmlhttp = null;

	this.resetData = function() {
		this.method = "POST";
  		this.queryStringSeparator = "?";
		this.argumentSeparator = "&";
		this.URLString = "";
		this.encodeURIString = true;
  		this.execute = false;
  		this.element = null;
		this.elementObj = null;
		this.requestFile = file;
		this.vars = new Object();
		this.responseStatus = new Array(2);
  	};

	this.resetFunctions = function() {
  		this.onLoading = function() { };
  		this.onLoaded = function() { };
  		this.onInteractive = function() { };
  		this.onCompletion = function() { };
  		this.onError = function() { };
		this.onFail = function() { };
	};

	this.reset = function() {
		this.resetFunctions();
		this.resetData();
	};

	this.createAJAX = function() {
		try {
			this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e1) {
			try {
				this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e2) {
				this.xmlhttp = null;
			}
		}

		if (! this.xmlhttp) {
			if (typeof XMLHttpRequest != "undefined") {
				this.xmlhttp = new XMLHttpRequest();
			} else {
				this.failed = true;
			}
		}
	};

	this.setVar = function(name, value){
		this.vars[name] = Array(value, false);
	};

	this.encVar = function(name, value, returnvars) {
		if (true == returnvars) {
			return Array(encodeURIComponent(name), encodeURIComponent(value));
		} else {
			this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);
		}
	}

	this.processURLString = function(string, encode) {
		encoded = encodeURIComponent(this.argumentSeparator);
		regexp = new RegExp(this.argumentSeparator + "|" + encoded);
		varArray = string.split(regexp);
		for (i = 0; i < varArray.length; i++){
			urlVars = varArray[i].split("=");
			if (true == encode){
				this.encVar(urlVars[0], urlVars[1]);
			} else {
				this.setVar(urlVars[0], urlVars[1]);
			}
		}
	}

	this.createURLString = function(urlstring) {
		if (this.encodeURIString && this.URLString.length) {
			this.processURLString(this.URLString, true);
		}

		if (urlstring) {
			if (this.URLString.length) {
				this.URLString += this.argumentSeparator + urlstring;
			} else {
				this.URLString = urlstring;
			}
		}

		// prevents caching of URLString
		this.setVar("rndval", new Date().getTime());

		urlstringtemp = new Array();
		for (key in this.vars) {
			if (false == this.vars[key][1] && true == this.encodeURIString) {
				encoded = this.encVar(key, this.vars[key][0], true);
				delete this.vars[key];
				this.vars[encoded[0]] = Array(encoded[1], true);
				key = encoded[0];
			}

			urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];
		}
		if (urlstring){
			this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);
		} else {
			this.URLString += urlstringtemp.join(this.argumentSeparator);
		}
	}

	this.runResponse = function() {
		eval(this.response);
	}

	this.runAJAX = function(urlstring) {
		if (this.failed) {
			this.onFail();
		} else {
			this.createURLString(urlstring);
			if (this.element) {
				this.elementObj = document.getElementById(this.element);
			}
			if (this.xmlhttp) {
				var self = this;
				if (this.method == "GET") {
					totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;
					this.xmlhttp.open(this.method, totalurlstring, true);
				} else {
					this.xmlhttp.open(this.method, this.requestFile, true);
					try {
						this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
					} catch (e) { }
				}

				this.xmlhttp.onreadystatechange = function() {
					switch (self.xmlhttp.readyState) {
						case 1:
							self.onLoading();
							break;
						case 2:
							self.onLoaded();
							break;
						case 3:
							self.onInteractive();
							break;
						case 4:
							self.response = self.xmlhttp.responseText;
							self.responseXML = self.xmlhttp.responseXML;
							self.responseStatus[0] = self.xmlhttp.status;
							self.responseStatus[1] = self.xmlhttp.statusText;

							if (self.execute) {
								self.runResponse();
							}

							if (self.elementObj) {
								elemNodeName = self.elementObj.nodeName;
								elemNodeName.toLowerCase();
								if (elemNodeName == "input"
								|| elemNodeName == "select"
								|| elemNodeName == "option"
								|| elemNodeName == "textarea") {
									self.elementObj.value = self.response;
								} else {
									self.elementObj.innerHTML = self.response;
								}
							}
							if (self.responseStatus[0] == "200") {
								self.onCompletion();
							} else {
								self.onError();
							}

							self.URLString = "";
							break;
					}
				};

				this.xmlhttp.send(this.URLString);
			}
		}
	};

	this.reset();
	this.createAJAX();
}

countries.asp

<%

name=request.querystring("letters")
response.write name
%>

<%
dim con,rs
set con=Server.CreateObject("ADODB.Connection")
con.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("country.mdb")&";"
set rs=Server.CreateObject("ADODB.Recordset")
rs.Open "select * from master where name like '"&name&"%'",con,1,2%>



<%do until rs.eof%>
<%=rs("ID")%>###<%=rs("name")%>|
        <%rs.movenext
          loop
          set rs=nothing
         set con=nothing

        %>

display.asp

<STYLE TYPE='text/css'>
   .cMenu{
   position: absolute;
   visibility:hidden;
   color:#666666;
   width:200px;
   border:2px solid #333333;
   background-color:#CCCCCC;
   font-family:"Arial, Helvetica, sans-serif";
   font-size:14px;
   font-weight:normal;
   line-height:20px;
   cursor:hand;
}

.menuitems{
   padding-left:15px;
   padding-right:10px;
}
select {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; color: #0000FF; background-color: #CCCCCC}
</STYLE>
<link rel="shortcut icon" href="li/favicon.ico">

<style type="text/css">
<!--
body {
	background-image: url(../images/fundo_menu_esq.gif);
}
-->
	
	</style>

<title>DROP DOWN LIST , COMBO BOX , LIST BOX , FORM</title>
<p align="center"><strong><b>Item selecionado  </b> </strong></p>

<p align="center"><b><font size="7" color="#FF0000"><%

response.write request.form("country")
response.write request.form("country_ID")
%></font></b></p>

<p align="center"><a href="index.asp">Voltar</a></p>

index.asp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>AJAX ASP</title>
    <style>
	/* Big box with list of options */
	#ajax_listOfOptions{
		position:absolute;	/* Never change this one */
		width:175px;	/* Width of box */
		height:250px;	/* Height of box */
		overflow:auto;	/* Scrolling features */
		border:1px solid #317082;	/* Dark green border */
		background-color:#FFF;	/* White background color */
		text-align:left;
		font-size:0.9em;
		z-index:100;
	}
	#ajax_listOfOptions div{	/* General rule for both .optionDiv and .optionDivSelected */
		margin:1px;		
		padding:1px;
		cursor:pointer;
		font-size:0.9em;
	}
	#ajax_listOfOptions .optionDiv{	/* Div for each item in list */
		
	}
	#ajax_listOfOptions .optionDivSelected{ /* Selected item in the list */
		background-color:#317082;
		color:#FFF;
	}
	#ajax_listOfOptions_iframe{
		background-color:#F00;
		position:absolute;
		z-index:5;
	}
	
	form{
		display:inline;
	}
	
	body {
	SCROLLBAR-FACE-COLOR: #336699;
	SCROLLBAR-HIGHLIGHT-COLOR: #8080FF;
	SCROLLBAR-SHADOW-COLOR: #FFFFFF;
	SCROLLBAR-3DLIGHT-COLOR: #ffff99;
	SCROLLBAR-ARROW-COLOR: #FFFFFF;
	SCROLLBAR-TRACK-COLOR: #E6E6E6;
	FONT-FAMILY: Arial, Verdana;
	SCROLLBAR-DARKSHADOW-COLOR: #008080;
	background-image: url(../images/fundo_menu_esq.gif);
	background-repeat: repeat;
}
</style>
<STYLE type=text/css>
A:link {
	COLOR: #333333; TEXT-DECORATION: underline
}
A:visited {
	COLOR: #333333; TEXT-DECORATION: underline
}
A:active {
	COLOR: #333333; TEXT-DECORATION: underline
}
A:hover {
	COLOR: #000000; TEXT-DECORATION: none
}
A:unknown {
	font-face: Arial
}
</STYLE>
<STYLE type=text/css>
.bodytext {
	FONT-SIZE: 11px; COLOR: #333333; FONT-FAMILY: Verdana
}
.bodytext2 {
	FONT-SIZE: 12px; COLOR: #333333; FONT-FAMILY: Arial
}
</STYLE>

<STYLE TYPE='text/css'>
   .cMenu{
   position: absolute;
   visibility:hidden;
   color:#666666;
   width:200px;
   border:2px solid #333333;
   background-color:#CCCCCC;
   font-family:"Arial, Helvetica, sans-serif";
   font-size:14px;
   font-weight:normal;
   line-height:20px;
   cursor:hand;
}

.menuitems{
   padding-left:15px;
   padding-right:10px;
}
select {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; color: #0000FF; background-color: #CCCCCC}
</STYLE>
<link rel="shortcut icon" href="li/favicon.ico">

<style type="text/css">
<!--
.style2 {
	color: #31659C;
	font-weight: bold;
}
.style10 {color: #FFFFFF; font-weight: bold; }
.style18 {color: #FFFFFF}
.style12 {color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }
.style11 {font: 10px Verdana, Arial, Helvetica, sans-serif;}
.style11 {color: #CCCCCC;
	font: bold;
}
.style13 {	color: #D6DBFF;
	font-size: 9px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style3 {color: #636563}
.style19 {color: #CCCCCC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }
.style19 {color: #CCCCCC;
	font: bold;
}
-->
	
	</style>
	<script type="text/javascript" src="js/ajax.js"></script>
	<script type="text/javascript" src="js/ajax-dynamic-list.js">
	/************************************************************************************************************
	(C)	************************************************************************************************************/	
	</script>
</head>
<body>


</p>

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="38%" id="AutoNumber1" bgcolor="#D7E6FF">
  <tr>
        <td width="436" bgcolor="#A4C6FF"><form action="display.asp" method="POST" autocomplete="off"><center>
          <table border="0" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
				<tr>
				  <td width="145"><label for="country" class="style2">Entre com o país:</label></td>
					<td width="141">
                    <input name="country" type="text" class="style2" id="country" onkeyup="ajax_showOptions(this,'getCountriesByLetters')" value="" size="20">
				  <input type="hidden" id="country_hidden" name="country_ID"><!-- THE ID OF the country will be inserted into this hidden input --></td>
				</tr>	
				<tr>
					<td colspan="2">
                    <p align="center">	
		<input name=":: Enviar" type="submit" class="style2" id=":: Enviar" value="Submit"></td>	
				</tr>
		  </table>		
			
		      </center>
            
		</form>
</td>
  </tr>
</table>





</body>
</html>

rd111072 · Setembro 28, 2009

Bom,

ainda continuo sem solução. O script acima (do xanburzun) não tinha muito a ver com o que eu quero.

Alguém poderia me ajudar com o script que postei, fazê-lo funcionar com valores de um recordset???

Arquivado

Autocompletar campo com Recordset

Recommended Posts

rd111072 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

rd111072 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

desisto 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rd111072 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

rd111072 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

desisto 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rd111072 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

rd111072 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

rd111072 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

rd111072 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante