Ir para conteúdo

POWERED BY:

Arquivado

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

silas_i

autocompletar

Recommended Posts

Olá pessoal, estou precisando de um recuros de AutoCompletar para meus campos do formulário. Estou desenvolvendo um Correio interno e para o cara não precisar ficar preenchendo o nome todo do usuário pensei em usar o recurso "AutoCompletar", porém não tenho a mínima idéia de como se faz isso. Alguém já passou por isso !? Sabe como resolver ? Como é feito !?

Compartilhar este post


Link para o post
Compartilhar em outros sites

você terá q gerar do banco de dados a lista de usuários... e terá q trabalhar com JS para fazer com q apareça o auto completar!! tente copiar do Yahoo ou GMailfalows

Compartilhar este post


Link para o post
Compartilhar em outros sites

fala ae brother, é eu pensei em salvar a página do GMAIL.. mas você ja fez isso !? viu que zona q é o JS Script deles !? acho que não da pra encarar não.. ainda mais sem comentários..

Compartilhar este post


Link para o post
Compartilhar em outros sites

de qualquer forma se você pretender fazer assim vai ter que criar um esquema de pesquisa no javascript, tipo uma arvore binaria, onde voce não varre todos os registros mas apenas alguns niveis para chegar no resultado

Compartilhar este post


Link para o post
Compartilhar em outros sites

Por um acaso alguém já fez isso !? Ou sabe onde posso arrumar um exemplo disso !?Obrigado pessoal...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Mano Silas... peguei este codigo no site de um cara chamado Paul Withrow.

O cara é muito bom com javascript e DHTML.

 

De repente é o q você precisa.

 

Cola o codigo num txt, salva como html e veja o resultado.

 

<html><head><title> New Document </title><script language="JavaScript"><!--var nameArray=new Array("Adam Young","Albert Downey","Bernie Pottrell","Beth Wood","Cathy Tillyer","Denis O'Rourke","George Palframan","Holly Toogood","Ian Thompson","James Skinner","Jenny Hackwell","John O'Neill","Kathy Toogood","Lizzie Schofield","Malcolm Toogood","Mike Child","Mike Pollard","Paul Whitrow","Pete Escott","Richard Gilbert","Richard Wheeler","Russell Kay","Shelley Godwin","Simon Givens","Steve White","Tim Smith","Tom Bagshaw","Tony Dannatt")var colors = new Array("aliceblue","antiquewhite","aqua","aquamarine","azure","beige","bisque","black","blanchedalmond","blue","blueviolet","brown","burlywood","cadetblue","chartreuse","chocolate","coral","cornflowerblue","cornsilk","crimson","cyan","darkblue","darkcyan","darkgoldenrod","darkgray","darkgreen","darkkhaki","darkmagenta","darkolivegreen","darkorange","darkorchid","darkred","darksalmon","darkseagreen","darkslateblue","darkslategray","darkturquoise","darkviolet","deeppink","deepskyblue","dimgray","dodgerblue","firebrick","floralwhite","forestgreen","fuchsia","gainsboro","ghostwhite","gold","goldenrod","gray","green","greenyellow","honeydew","hotpink","indianred","indigo","ivory","khaki","lavender","lavenderblush","lawngreen","lemonchiffon","lightblue","lightcoral","lightcyan","lightgoldenrodyellow","lightgreen","lightgrey","lightpink","lightsalmon","lightseagreen","lightskyblue","lightslategrey","lightsteelblue","lightyellow","lime","limegreen","linen","magenta","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurple","mediumseagreen","mediumslateblue","mediumspringgreen","mediumturquoise","mediumvioletred","midnightblue","mintcream","mistyrose","moccasin","navajowhite","navy","oldlace","olive","olivedrab","orange","orangered","orchid","palegoldenrod","palegreen","paleturquoise","palevioletred","papayawhip","peachpuff","peru","pink","plum","powderblue","purple","red","rosybrown","royalblue","saddlebrown","salmon","sandybrown","seagreen","seashell","sienna","silver","skyblue","slateblue","slategray","snow","springgreen","steelblue","tan","teal","thistle","tomato","turquoise","violet","wheat","white","whitesmoke","yellow","yellowgreen")var systemColors = new Array('ActiveBorder','ActiveCaption','AppWorkspace','Background','ButtonFace','ButtonHighlight','ButtonShadow','ButtonText','CaptionText','GrayText','Highlight','HighlightText','InactiveBorder','InactiveCaption','InactiveCaptionText','InfoBackground','Menu','MenuText','Scrollbar','ThreeDDarkShadow','ThreeDFace','ThreeDHighlight','ThreeDLightShadow','Window','WindowFrame','WindowText')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,what){ var k=event.keyCode var T=findPosY(obj) var L=findPosX(obj) var hld=document.getElementById('listHolder') if(!hld){  var hld=document.createElement('DIV')  hld.id='listHolder'  document.body.appendChild(hld) } hld.style.top=(T+obj.offsetHeight) hld.style.left=L hld.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<what.length;a++){   if(txt.toLowerCase()==what[a].toLowerCase().substring(0,txt.length)){    match=true    str+=('<option value="'+what[a].replace(/\'/gi,'’')+'">'+what[a]+'</option>')   }  }  str+='</select>'  if(match){   hld.innerHTML=str   hld.style.display='block'   var sel=document.getElementById('selector')   if(k=='40'){    sel.focus()   }   if(k=='13'){	document.getElementById('listHolder').style.display='none'    //boxAction(obj.value)   }  } }}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;}function boxAction(val){ alert(val)}//--></script></head><body><!-- Site specific info (can be removed) --><center><br><font size="6" face="ms sans serif"><u>Auto Complete Text Boxes</u></font><br><br><br><font size="2" face="ms sans serif"><ul>	<li>Easy to configure	<li>Supports multiple arrays of data	<li>Use <u>Arrow Keys</u> to move to and navigate the lists, and <u>Return</u> to select	<li>Call by adding an id and an onkey event to a text box, eg:<br>	<input type="text" name="textBox2" id="textBox2" onkeyup="checkList(this,arrayName)"></ul></font><a href="javascript:void(0)" onclick="window.location='view-source:'+window.location.href" onclick="this.blur()">View Source</a><br><br><br></center><!-- End Site specific info --><center><form method=post action=""><table><tr class="navTxtLiks"><td>Names:</td><td><input type="text" name="textBox" id="textBox" size="30" onkeyup="checkList(this,nameArray)"></td></tr><tr class="navTxtLiks"><td>Colors:</td><td><input type="text" name="textBox2" id="textBox2" onkeyup="checkList(this,colors)"></td></tr><tr class="navTxtLiks"><td>Other:</td><td><textarea rows="" cols="" name="textBox3" id="textBox3" onkeyup="checkList(this,systemColors)"></textarea></td></tr></table></form></center></body></html>

Flw http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Martinelli

Compartilhar este post


Link para o post
Compartilhar em outros sites

MArtinelli valeu pelo exemplo... achei o que eu precisava...

 

olha só

 

<script>fruits = new Array('apple','pear','orange',    'mango','durain','grapes','starfruit');names = new Array('tom','dick','harry','john','petter','foo','bar');function autocomplete(n,ac_array){    if (n.value == "") return 0;    if (event.keyCode == 8 && n.backspace){        n.value = n.value.substr(0,n.value.length-1);        n.backspace = false;    }    var r = n.createTextRange();        tmp= n.value;    if (tmp == "")return 0;    for (z=0;z<ac_array.length;z++){        tmp2 = ac_array[z];        count = 0;        for (i = 0;i<tmp.length;i++){            if (tmp2.charAt(i) == tmp.charAt(i)){                count++            }        }        if (count == tmp.length){            diff = tmp2.length - tmp.length;            if (diff <= 0) break;            kap = "";            for (i=0;i<tmp2.length;i++){                if (i >= tmp.length) kap += tmp2.charAt(i);            }            n.backspace = true;            r.text += kap;            r.findText(kap,diff*-2);            r.select();            return 0;        }    }    n.backspace = false;    return 0;}</script><input name='fruit' type='text' class='textbox' title="Opening"     onkeyup="autocomplete(this,fruits)" size="20"><input name='Name' type='text' class='textbox' title="Opening"     backspace='false' onkeyup="autocomplete(this,names)" size="20">

Compartilhar este post


Link para o post
Compartilhar em outros sites

Encontrei mais um problema. hehehehehEle funciona o autocompletar somente para a primeira palavra digitada. Se eu digitar "apple" ele funciona, agora se eu deixar um espaço ou uma virgula ele não autocompleta a próxima palavra, pq !????

Compartilhar este post


Link para o post
Compartilhar em outros sites

mas com os nomes que você colocou aí, nao vai completar pq nao tem nenhum com segundo nome (john carry por exemplo...)Tenta e ve se rola...coloca dois nomes iguais e com sobrenomes diferentes...depois avisa aí.

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.