Há algum tempo, eu queria usar o Google Suggest e encontrei muitos resultados na Internet, mas não foi satisfatório, então passei algum tempo escrevendo um. É basicamente o mesmo que o Google Suggest. Os resultados aproximados subsequentes estão além do escopo do. este programa. Para um código mais completo, consulte esta versão que suporta banco de dados. Após edição e teste pela Script House.
Asp + Ajax imitação da versão do banco de dados de efeito de prompt de pesquisa do Google
Existem locais que precisam ser modificados:
Copie o código do código da seguinte forma:
javascript.js
var url=ajax.asp; //Endereço de back-end
var time_delayajax=300; //Atraso de pesquisa
var time_delayupdown=100; //Atraso da chave de direção
obj_div.style.top = (xtop + 20) + px; //20 é quase a altura da caixa de entrada, ajuste de acordo com a situação real
ajax_xmlhttp.send(sift_value=+escape(temp_value)); //O valor enviado para o segundo plano
dd=d+<li onmouseover=/overli(+i+);/ onmousedown=/downli(+i+)/ onmouseup=/upli(+i+,event)/ onmousemove=/moveli();/><span>about +c [1]+resultado</span>+c[0]+</li>;//Exibição de ****li
O formato do resultado de saída em segundo plano deve ser 'Texto 1, Texto 2'....
'java,2''javascript,11''exemplo java,22'etc.
padrão.css
Copie o código do código da seguinte forma:
.ajaxsearch {
width:300px; //A largura da camada de prompt
}
Homeindex.html
Copie o código do código da seguinte forma:
<!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>
<cabeça>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<link rel=stylesheet type=text/css href=default.css />
<linguagem script=JavaScript src=javascript.js type=text/javascript></script>
<title>Google sugere exemplo de alta imitação</title>
</head>
<body onResize=removediv();>
<estilo div=margem:20px 50px>
<input style=width:298px;height:18px type=text autocomplete=off onBlur=blurdeal(); onKeyDown=keydowndeal(event);
</div>
</body>
</html>
Scriptjavascript.js
Copie o código do código da seguinte forma:
///////////////////////////////Caixa de prompt de pesquisa ////////////// /// /////////////////
var obj_div; //Objeto da camada de prompt
var obj_input; //objeto da caixa de entrada
var main_delay; //Julgar objeto de atraso de alteração de valor
var ajax_delay; //objeto de pesquisa atrasada ajax
var updown_delay; //Objeto de atraso da chave de direção
var ajax_xmlhttp; //objeto ajax
var div_word=null; //Pesquisa o valor correspondente à camada de prompt atual
var li_num=-1; //Pseudo posição do cursor, solicita o número li da camada selecionada, começando em 0
var li_down=-1; //O número de sequência da camada de prompt quando o mouse é pressionado
var value_ed=; //O valor da caixa de entrada antes do atraso
var value_ing= //O valor atual da caixa de entrada
var value_unexit=; //Pesquisa o início de um valor sem resultados
var updown_run=false; //Permitir teclas de seta para cima e para baixo
var ajax_run=false; //true significa processo normal, false interrompe o ajax
var ajax_run_ing=false; //true está em execução, false está ocioso
var input_focus=false; //Foco da caixa de texto
var url=ajax.asp; //Endereço de back-end *************************************** *********************
var time_delayajax=300; //Atraso de pesquisa******************************************* ***** *******************
var time_delayupdown=100; //Atraso da chave de direção****************************************** ** ****************
var $=função(Fun_id){
retornar document.getElementById(Fun_id);
}
tentar{
ajax_xmlhttp= novo ActiveXObject('Msxml2.XMLHTTP');
}pegar(e){
tentar{
ajax_xmlhttp= novo ActiveXObject('Microsoft.XMLHTTP');
}pegar(e){
tentar{
ajax_xmlhttp= novo XMLHttpRequest();
}catch(e){ajax_xmlhttp=null;}
}
}
////////////////////////Criar camada de prompt ////////////////////// // /
função criarajaxdiv(){
var create_div = document.createElement(div);
criar_div.type = div;
var promptdiv = document.body.appendChild(create_div);
promptdiv.className = ajaxsearch;
obj_div=promptdiv;
}
////////////////////////Definir a posição da camada de prompt /////////////////// //// //
função removediv(){
if(!obj_div || !obj_input)retornar falso;
if(obj_div.style.display==none)retornar falso;
var obj=obj_input;
var xtop=0;
var xesquerda=0;
enquanto(obj){
xtop += obj[offsetTop];
xleft += obj[offsetLeft];
obj = obj.offsetParent;
}
obj_div.style.left = xleft + px;
obj_div.style.top = (xtop + 20) + px; //20 é quase a altura da caixa de entrada, ajuste de acordo com a situação real**************** *********************************************8
li_down=-1;
}
///////////////////////Ocultar camada de prompt ////////////////////// // /
função esconderajaxdiv(){
obj_div.style.display=none;
li_down=-1;
}
////////////////////////Definir o <li>estilo css selecionado//////////////// /// //////
função setliststyle(){
for(var i=0;i<obj_div.firstChild.childNodes.length;i++){
obj_div.firstChild.childNodes[i].id=;
}
if(li_num!=-1)obj_div.firstChild.childNodes[li_num].id=liseleted;
}
////////////////////////O mouse passa pela camada de prompt ///////////////// ////// //
função overli(Fun_seletedlinum){
if(li_num==-1)value_ing=obj_input.value;
li_num=Fun_seletedlinum;
setlistilo();
}
////////////////////////Camada de prompt de arrastar do mouse //////////////////// // ///
função moveli(){
if(window.getSelection){
setfocus();
window.getSelection().removeAllRanges();
}outro{
document.selection.empty();
setfocus();
}
}
////////////////////////Camada de prompt de pressão do mouse //////////////////// // ///
função downli(Fun_seletedlinum){
if(!obj_input)retorna falso;
li_down=Fun_seletedlinum;
input_focus=true;
}
///////////////////////Camada de prompt pop-up do mouse ////////////////// //// ///
função upli(Fun_seletedlinum,Fun_event){
if(!obj_input)retorna falso;
if(Fun_event.button==2){li_down=-1;return}
if(li_down!=Fun_seletedlinum){
li_down=-1;
retornar falso;
}
clearTimeout(ajax_delay);
clearTimeout(updown_delay);
updown_run = verdadeiro;
ajax_run=falso;
ajax_run_ing=falso;
li_num=-1;
div_palavra=nulo;
valor_ed=obj_div.firstChild.childNodes[Fun_seletedlinum].childNodes[1].nodeValue;
obj_input.value=valor_ed;
valor_ing=valor_ed;
esconderajaxdiv();
obj_div.innerHTML=;
}
////////////////////////Defina a caixa de texto para obter foco ///////////////// ///// //
função setfocus(){
if(janela.evento){
var r = obj_input.createTextRange();
r.moveStart('caractere',obj_input.value.length);
r.collapse(verdadeiro);
r.select();
}outro{
obj_input.selectionStart=obj_input.value.length;
obj_input.focus();
}
}
////////////////////////A caixa de texto perde o foco /////////////////// //// //
função borrão(){
if(input_focus==true){
setfocus();
setTimeout(setfocus());
retornar falso;
}
updown_run=falso;
ajax_run=falso;
ajax_run_ing=falso;
clearInterval(main_delay);
clearTimeout(ajax_delay);
clearTimeout(updown_delay);
esconderajaxdiv();
if(valor_ed!=obj_input.value)obj_div.innerHTML=;
}
////////////////////////Caixa de texto recebe foco //////////////////// /// //
função focusdeal(Fun_event){
if(!obj_div)createajaxdiv();
if(input_focus==true){
input_focus=falso;
retornar falso;
}
var obj=((window.event)?Fun_event.srcElement:Fun_event.target);
if(obj.type!=texto)retorna falso;
updown_run = verdadeiro;
ajax_run = verdadeiro;
ajax_run_ing=falso;
if(obj_input==obj && value_ed==obj.value && obj_div.innerHTML!=){
obj_div.style.display=bloco;
removediv();
}outro{
obj_input=obj;
valor_ed=obj.valor;
valor_ing=obj.valor;
valor_unexit=;
li_num=-1;
li_down=-1;
div_palavra=nulo;
obj_div.innerHTML=;
removediv();
}
main_delay=setInterval(mainajax(),10);
}
///////////////////////Função principal /////////////////////// ///
função mainajax(){
if(value_ed==obj_input.value)retornar falso;
if(value_unexit!= && (obj_input.value).indexOf(value_unexit)==0){hideajaxdiv();obj_div.innerHTML=;return false;}
if(value_ed!=obj_input.value && ajax_run_ing==false){
ajax_run = verdadeiro;
valor_ed=obj_input.valor;
clearTimeout(ajax_delay);
if(obj_input.valor!=){
ajax_delay=setTimeout(getsearch();,time_delayajax);
}outro{
esconderajaxdiv();
obj_div.innerHTML=;
ajax_run=falso;
retornar falso;
}
}
}
///////////////////////Obter conteúdo de pesquisa ////////////////////// /// /
função getpesquisa(){
var temp_value=obj_input.value;
if(ajax_xmlhttp==nulo){
retornar falso;
}senão if(ajax_xmlhttp.readyState!=0){
ajax_xmlhttp.abort();
ajax_run_ing=falso;
}
ajax_xmlhttp.onreadystatechange=função(){
if(ajax_run==false){ajax_xmlhttp.abort();ajax_run_ing=false;return false;}
if(ajax_xmlhttp.readyState==4){
obj_div.innerHTML=;
if(ajax_xmlhttp.status==200 || ajax_xmlhttp.status==304){
var content=ajax_xmlhttp.responseText;
if(contante!= && ajax_run==true){
div_palavra=valor_temp;
obj_div.innerHTML=resetcontant(contante);
obj_div.style.display=bloco;
removediv();removediv();
}outro{
esconderajaxdiv();
}
updown_run = verdadeiro;
ajax_run_ing=falso;
li_num=-1;
if(contant==)value_unexit=temp_value;
}
}
}
ajax_xmlhttp.open(post,url,true);
ajax_xmlhttp.setRequestHeader('Tipo de conteúdo','aplicativo/x-www-form-urlencoded');
ajax_run_ing=true;
ajax_xmlhttp.send(sift_value=+escape(temp_value)); //O valor enviado para o plano de fundo***************************** * ***********
}
////////////////////////Reorganização de conteúdo /////////////////////// //
função resetcontant(Fun_contant){
if(Fun_contant==null || Fun_contant==)return ;
var a=Fun_contant.substring(1,Fun_contant.length-1);
if(Fun_contant==null || Fun_contant==)return ;
var b=a.split('');
var c;
vard;
d=<ul>;
para(var i em b){
c=b[i].split();
//************************************************ ***************
d=d+<li onmouseover=/overli(+i+);/ onmousedown=/downli(+i+)/ onmouseup=/upli(+i+,event)/ onmousemove=/moveli();/><span>sobre +c [1]+resultado</span>+c[0]+</li>;
//************************************************ ***************
}
d=d+<li onmousedown=/input_focus=true;li_down=-1;/ onmouseup=/li_down=-1/ onmousemove=/moveli();/><span><a class=/shutajaxdiv/ onclick=/hideajaxdiv( );/>Fechar</a></span></li>
d=d+</ul>;
retornar d;
}
////////////////////////Eventos de teclado ////////////////////// ////
função keydowndeal(Fun_event){
var keyc=((window.event)?Fun_event.keyCode:Fun_event. which);
if(keyc==13){hideajaxdiv();return false;}
if(chavec==27){
if(obj_div.style.display==bloco && li_num>-1)value_ed=obj_input.value=value_ing;
esconderajaxdiv();
retornar falso;
}
if(chavec==40 || chavec==38){
if(div_word==obj_input.value && obj_div.style.display==none && obj_div.innerHTML!=){
obj_div.style.display=bloco;
removediv();
retornar falso;
}
if(li_num==-1){
if(div_word!=obj_input.value)retorna falso;
}outro{
if(div_word!=value_ing)retorna falso;
}
if(updown_run==false || ajax_run_ing==true || obj_div.style.display==none)retornar falso;
updown_delay=setTimeout(updownli(+keyc+),time_delayupdown);
updown_run=falso;
}
}
//////////////////////// Movimento da tecla de direção li //////////////////// /// //
função updownli(Fun_key){
if(!obj_div){retornar falso;}
updown_run = verdadeiro;
if(li_num==-1){
if(div_word!=obj_input.value){hideajaxdiv();obj_div.innerHTML=;li_num=-1;return false;}
}outro{
if(div_word!=value_ing){hideajaxdiv();obj_div.innerHTML=;li_num=-1;return false;}
}
if(updown_run==false)retornar falso;
if(li_num==-1)valor_ing=valor_ed;
if(Fun_key==40){
if(li_num<obj_div.firstChild.childNodes.length-2){
li_num++;
}outro{
li_num=-1;
}
}
if(Fun_key==38){
if(li_num>=0){
li_num--;
}outro{
li_num=obj_div.firstChild.childNodes.length-2;
}
}
if(li_num!=-1){
valor_ed=obj_input.value=obj_div.firstChild.childNodes[li_num].childNodes[1].nodeValue;
}outro{
valor_ed=obj_input.value=valor_ing;
}
setlistilo();
}
plano de fundo ajax.asp
Copie o código do código da seguinte forma:
<%@LANGUAGE=PÁGINA DE CÓDIGO VBSCRIPT=65001%>
<%opção explícita%>
<%Response.CodePage=65001%>
<%Response.Charset=utf-8%>
<!--#include arquivo=conn.asp-->
<%
dimSift_value
dim Sql,Rs,I,Num
dimContante
Conteúdo=
Num = 10
Sift_value=replace(unescape(request.form(sift_value)),,)
Sql=selecione a palavra-chave &Num& superior,matchnum da pesquisa onde palavras-chave como &Sift_value&% ordenam por id
definir Rs=server.CreateObject(adodb.recordset)
Rs.open Sql,Conn,1,1
se não (Rs.eof e Rs.bof) então
para I = 0 a Num-1
Contant=Contante&'&rs(0)&,&rs(1)&'
Rs. próximo
se Rs.eof então saia para
próximo
terminar se
resposta.Write(Contante)
Rs.fechar
definir Rs = nada
%>