Ir para conteúdo

Arquivado

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

marvazoler

Pesquisa inteligente

Por , em Javascript

Recommended Posts

marvazoler    0

marvazoler
Postado

Olá galera beleza?

 

O meu caso é o seguinte:

 

Digamos que tenho um campo para digitar um determinando código;

 

Eu gostaria quando eu digitasse por exemplo 1000 no campo aparece-se a descrição na frente, como eu faria isso?

 

desde já agradeço

 

Galera tem como fazer uma pesquisa na mesma tela dentro de um campo?

Compartilhar este post

Link para o post
Compartilhar em outros sites

hargon    64

hargon
Postado

Você quer que apareça antes de você mandar buscar? Tipo GoogleSuggest?

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

Digamos que tenho um campo para digitar um determinando código;

 

Eu gostaria quando eu digitasse por exemplo 1000 no campo aparece-se a descrição na frente, como eu faria isso?

por exemplo você tem um campo o user entra com o código e você mostra alguma informação do mesmo, ou tipo um google suggest, tipo abaixo:

 

Por exemplo num banco de dados access, com a seguinte estrutura.o user vai digitando e vai consultando a medida que o mesmo digita.

 

ID - autonumeracao

Name - texto

 

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 , AJAX ACCESS , SQL AJAX , GOOGLE 
   RECOMMEND , SCRIPT, DROPDOWN LIST , LIST BOX , SELECT , DYNAMIC CONTENTS</title>
<style>

#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;
}

</style>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/ajax-dynamic-list.js">
 </script>
</head>
<body>

<p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1043629408399616";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
google_ad_channel ="1705354499";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0066CC";
google_color_url = "FFFFFF";
google_color_text = "0066CC";
//--></script>
<script type="text/javascript"
 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1" bgcolor="#D7E6FF">
 <tr>
   <td width="436" bgcolor="#A4C6FF">
   
   <p align="center">
 <font size="6" color="#800000"><b>Entre com um País para busca:</b></font><form action="display.asp" method="POST" autocomplete="off">
  

  
  
			 <center>
  <table border="0" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
   <tr>
	<td><label for="country">País: </label></td>
	<td>
				   <input type="text" id="country" name="country" value="" onkeyup="ajax_showOptions(this,'getCountriesByLetters')" size="20">
	<input type="hidden" id="country_hidden" name="country_ID"></td>
   </tr> 
   <tr>
	<td colspan="2">
				   <p align="center"> 
 <input type="submit" value="Submit" name="Submit"></td> 
   </tr>
   </table>  
  
	   </center>
		   
 </form></p>

   <p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1043629408399616";
google_ad_width = 250;
google_ad_height = 250;
google_ad_format = "250x250_as";
google_ad_type = "text_image";
google_ad_channel ="1705354499";
google_color_border = "FFFFFF";
google_color_bg = "A4C6FF";
google_color_link = "32527A";
google_color_url = "A4C6FF";
google_color_text = "32527A";
//--></script>
<script type="text/javascript"
 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
   </script></td>
 </tr>
</table>
</body>
</html>

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

	   %>

 

isplay.asp

 

<title>OUTPUT AUTOMATIC DROP DOWN LIST , COMBO BOX , LIST BOX , FORM </title>
<p align="center"><b>HERE IS THE INFORMATION SUBMITTED </b> </p>
<p align="center"><script type="text/javascript"><!--
google_ad_client = "pub-1043629408399616";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
google_ad_channel ="1705354499";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0066CC";
google_color_url = "FFFFFF";
google_color_text = "0066CC";
//--></script>
<script type="text/javascript"
 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></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"><script type="text/javascript"><!--
google_ad_client = "pub-1043629408399616";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
google_ad_channel ="1705354499";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0066CC";
google_color_url = "FFFFFF";
google_color_text = "0066CC";
//--></script>
<script type="text/javascript"
 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
<p align="center"><a href="index.asp">voltar</a></p>

ajax.js

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();
}

ajax-dynamic-list.js

var ajaxBox_offsetX = 0;
var ajaxBox_offsetY = 0;
var ajax_list_externalFile = 'countries.asp'; // Path to external file
var minimumLettersBeforeLookup = 1; // Number of letters entered before a lookup is performed.

var ajax_list_objects = new Array();
var ajax_list_cachedLists = new Array();
var ajax_list_activeInput = false;
var ajax_list_activeItem;
var ajax_list_optionDivFirstItem = false;
var ajax_list_currentLetters = new Array();
var ajax_optionDiv = false;
var ajax_optionDiv_iframe = false;

var ajax_list_MSIE = false;
if(navigator.userAgent.indexOf('MSIE')>=0 && navigator.userAgent.indexOf('Opera')<0)ajax_list_MSIE=true;

function ajax_getTopPos(inputObj)
{

var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){
returnValue += inputObj.offsetTop;
}
return returnValue;
}
function ajax_list_cancelEvent()
{
return false;
}

function ajax_getLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;

return returnValue;
}

function ajax_option_setValue(e,inputObj)
{
if(!inputObj)inputObj=this;
ajax_list_activeInput.value = inputObj.innerHTML;
if(document.getElementById(ajax_list_activeInput.name + '_hidden'))document.getElementById(ajax_list_activeInput.name + '_hidden').value = inputObj.id; 
ajax_options_hide();
}

function ajax_options_hide()
{
ajax_optionDiv.style.display='none'; 
if(ajax_optionDiv_iframe)ajax_optionDiv_iframe.style.display='none';
}

function ajax_options_rollOverActiveItem(item,fromKeyBoard)
{
if(ajax_list_activeItem)ajax_list_activeItem.className='optionDiv';
item.className='optionDivSelected';
ajax_list_activeItem = item;

if(fromKeyBoard){
if(ajax_list_activeItem.offsetTop>ajax_optionDiv.offsetHeight){
ajax_optionDiv.scrollTop = ajax_list_activeItem.offsetTop - ajax_optionDiv.offsetHeight + ajax_list_activeItem.offsetHeight + 2;
}
if(ajax_list_activeItem.offsetTop<ajax_optionDiv.scrollTop)
{
ajax_optionDiv.scrollTop = 0; 
}
}
}

function ajax_option_list_buildList(letters,paramToExternalFile)
{

ajax_optionDiv.innerHTML = '';
ajax_list_activeItem = false;
if(ajax_list_cachedLists[paramToExternalFile][letters].length<=1){
ajax_options_hide();
return; 
}
ajax_list_optionDivFirstItem = false;
var optionsAdded = false;
for(var no=0;no<ajax_list_cachedLists[paramToExternalFile][letters].length;no++){
if(ajax_list_cachedLists[paramToExternalFile][letters][no].length==0)continue;
optionsAdded = true;
var div = document.createElement('DIV');
var items = ajax_list_cachedLists[paramToExternalFile][letters][no].split(/###/gi);
div.innerHTML = items[items.length-1];
div.id = items[0];
div.className='optionDiv';
div.onmouseover = function(){ ajax_options_rollOverActiveItem(this,false) }
div.onclick = ajax_option_setValue;
if(!ajax_list_optionDivFirstItem)ajax_list_optionDivFirstItem = div;
ajax_optionDiv.appendChild(div);
} 
if(optionsAdded){
ajax_optionDiv.style.display='block';
if(ajax_optionDiv_iframe)ajax_optionDiv_iframe.style.display='';
}

}

function ajax_option_list_showContent(ajaxIndex,inputObj,paramToExternalFile)
{
var letters = inputObj.value;
var content = ajax_list_objects[ajaxIndex].response;
var elements = content.split('|');
ajax_list_cachedLists[paramToExternalFile][letters] = elements;
ajax_option_list_buildList(letters,paramToExternalFile);

}

function ajax_option_resize(inputObj)
{
ajax_optionDiv.style.top = (ajax_getTopPos(inputObj) + inputObj.offsetHeight + ajaxBox_offsetY) + 'px';
ajax_optionDiv.style.left = (ajax_getLeftPos(inputObj) + ajaxBox_offsetX) + 'px';
if(ajax_optionDiv_iframe){
ajax_optionDiv_iframe.style.left = ajax_optionDiv.style.left;
ajax_optionDiv_iframe.style.top = ajax_optionDiv.style.top; 
} 

}

function ajax_showOptions(inputObj,paramToExternalFile)
{

if(ajax_list_currentLetters[inputObj.name]==inputObj.value)return;
if(& #33;ajax_list_cachedLists[paramToExternalFile])ajax_list_cachedLists[paramToExte
rnalFile] = new Array();
ajax_list_currentLetters[inputObj.name] = inputObj.value;
if(!ajax_optionDiv){
ajax_optionDiv = document.createElement('DIV');
ajax_optionDiv.id = 'ajax_listOfOptions'; 
document.body.appendChild(ajax_optionDiv);

if(ajax_list_MSIE){
ajax_optionDiv_iframe = document.createElement('IFRAME');
ajax_optionDiv_iframe.border='0';
ajax_optionDiv_iframe.style.width = ajax_optionDiv.clientWidth + 'px';
ajax_optionDiv_iframe.style.height = ajax_optionDiv.clientHeight + 'px';
ajax_optionDiv_iframe.id = 'ajax_listOfOptions_iframe';

document.body.appendChild(ajax_optionDiv_iframe);
}

var allInputs = document.getElementsByTagName('INPUT');
for(var no=0;no<allInputs.length;no++){
if(!allInputs[no].onkeyup)allInputs[no].onfocus = ajax_options_hide;
} 
var allSelects = document.getElementsByTagName('SELECT');
for(var no=0;no<allSelects.length;no++){
allSelects[no].onfocus = ajax_options_hide;
}

var oldonkeydown=document.body.onkeydown;
if(typeof oldonkeydown!='function'){
document.body.onkeydown=ajax_option_keyNavigation;
}else{
document.body.onkeydown=function(){
oldonkeydown();
ajax_option_keyNavigation();}
}
var oldonresize=document.body.onresize;
if(typeof oldonresize!='function'){
document.body.onresize=function() {ajax_option_resize(inputObj); };
}else{
document.body.onresize=function(){oldonresize();
ajax_option_resize(inputObj);}
}

}

if(inputObj.value.length<minimumLettersBeforeLookup){
ajax_options_hide();
return;
}


ajax_optionDiv.style.top = (ajax_getTopPos(inputObj) + inputObj.offsetHeight + ajaxBox_offsetY) + 'px';
ajax_optionDiv.style.left = (ajax_getLeftPos(inputObj) + ajaxBox_offsetX) + 'px';
if(ajax_optionDiv_iframe){
ajax_optionDiv_iframe.style.left = ajax_optionDiv.style.left;
ajax_optionDiv_iframe.style.top = ajax_optionDiv.style.top; 
}

ajax_list_activeInput = inputObj;
ajax_optionDiv.onselectstart = ajax_list_cancelEvent;

if(ajax_list_cachedLists[paramToExternalFile][inputObj.value]){
ajax_option_list_buildList(inputObj.value,paramToExternalFile); 
}else{
ajax_optionDiv.innerHTML = '';
var ajaxIndex = ajax_list_objects.length;
ajax_list_objects[ajaxIndex] = new sack();
var url = ajax_list_externalFile + '?' + paramToExternalFile + '=1&letters=' + inputObj.value;

ajax_list_objects[ajaxIndex].requestFile = url; // Specifying which file to get
ajax_list_objects[ajaxIndex].onCompletion = function(){ ajax_option_list_showContent(ajaxIndex,inputObj,paramToExternalFile); }; // Specify function that will be executed after file has been found
ajax_list_objects[ajaxIndex].runAJAX(); // Execute AJAX function 
}


}

function ajax_option_keyNavigation(e)
{
if(document.all)e = event;

if(!ajax_optionDiv)return;
if(ajax_optionDiv.style.display=='none')return;

if(e.keyCode==38){ // Up arrow
if(!ajax_list_activeItem)return;
if(ajax_list_activeItem && !ajax_list_activeItem.previousSibling)return;
ajax_options_rollOverActiveItem(ajax_list_activeItem.previousSibling,true);
}

if(e.keyCode==40){ // Down arrow
if(!ajax_list_activeItem){
ajax_options_rollOverActiveItem(ajax_list_optionDivFirstItem,true);
}else{
if(!ajax_list_activeItem.nextSibling)return;
ajax_options_rollOverActiveItem(ajax_list_activeItem.nextSibling,true);
}
}

if(e.keyCode==13 || e.keyCode==9){ // Enter key or tab key
if(ajax_list_activeItem && ajax_list_activeItem.className=='optionDivSelected')ajax_option_setValue(false,ajax_list_activeItem);
if(e.keyCode==13)return false; else return true;
}
if(e.keyCode==27){ // Escape key
ajax_options_hide(); 
}
}

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