Hace algún tiempo, quise usar Google Suggest y encontré muchos resultados en Internet, pero no me satisficieron, así que dediqué un tiempo a escribir uno. Es básicamente lo mismo que Google Suggest. Los resultados aproximados posteriores están fuera del alcance de. este programa. Para obtener un código más completo, consulte esta versión que admite bases de datos. Después de editar y probar por Script House.
Versión de base de datos de efecto de solicitud de búsqueda de Google de imitación de Asp + Ajax
Hay lugares que necesitan ser modificados:
Copie el código de código de la siguiente manera:
javascript.js
var url=ajax.asp; //Dirección de fondo
var time_delayajax=300; //Retraso de búsqueda
var time_delayupdown=100; //Retraso de la tecla de dirección
obj_div.style.top = (xtop + 20) + px; // 20 es casi la altura del cuadro de entrada, ajústelo según la situación real
ajax_xmlhttp.send(sift_value=+escape(temp_value)); //El valor enviado al fondo.
dd=d+<li onmouseover=/overli(+i+);/ onmousedown=/downli(+i+)/ onmouseup=/upli(+i+,event)/ onmousemove=/moveli();/><span>acerca de +c [1]+resultado</span>+c[0]+</li>;//Visualización de ****li
El formato del resultado de salida en segundo plano debe ser 'Texto 1, Texto 2'....
'java,2''javascript,11''ejemplo de java,22'etc.
predeterminado.css
Copie el código de código de la siguiente manera:
.ajaxbúsqueda {
width:300px; //El ancho de la capa de solicitud
}
Inicioindex.html
Copie el código de código de la siguiente manera:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transicional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<cabeza>
<meta http-equiv=Tipo de contenido content=text/html;charset=utf-8 />
<enlace rel=tipo de hoja de estilo=texto/css href=default.css />
<lenguaje de script=JavaScript src=javascript.js tipo=texto/javascript></script>
<title>Google sugiere un ejemplo de alta imitación</title>
</cabeza>
<cuerpo onResize=removediv();>
<estilo div=margen:20px 50px>
<estilo de entrada=ancho:298px;alto:18px tipo=texto autocompletar=apagado onBlur=blurdeal(); onKeyDown=keydowndeal(evento);
</div>
</cuerpo>
</html>
scriptjavascript.js
Copie el código de código de la siguiente manera:
/////////////////////////////////Cuadro de solicitud de búsqueda////////////// /// ///////////////////
var obj_div; //Objeto de capa de solicitud
var obj_input; //Objeto del cuadro de entrada
var main_delay; // Juzgar el objeto de retraso de cambio de valor
var ajax_delay; //objeto de búsqueda retrasada ajax
var updown_delay // Objeto de retardo de tecla de dirección
var ajax_xmlhttp; //objeto ajax
var div_word=null; //Valor de búsqueda correspondiente a la capa de solicitud actual
var li_num=-1; //Pseudo posición del cursor, solicita el número li de la capa seleccionada, comenzando desde 0
var li_down=-1; //El número de secuencia de la capa de solicitud cuando se presiona el mouse
var value_ed=; //El valor del cuadro de entrada antes del retraso
var value_ing=; //El valor actual del cuadro de entrada
var value_unexit=; //Buscar el comienzo de un valor sin resultados
var updown_run=false; //Permitir teclas de flecha hacia arriba y hacia abajo
var ajax_run=false; //true significa proceso normal, false detiene ajax
var ajax_run_ing=false; //true se está ejecutando, false está inactivo
var input_focus=false; //Enfoque del cuadro de texto
var url=ajax.asp; //Dirección de backend **************************************** **********************
var time_delayajax=300 //Retraso de búsqueda****************************************** ***** *******************
var time_delayupdown=100 //Retraso de la tecla de dirección****************************************** ** ****************
var $=función(Fun_id){
devolver document.getElementById(Fun_id);
}
intentar{
ajax_xmlhttp= nuevo ActiveXObject('Msxml2.XMLHTTP');
}captura(e){
intentar{
ajax_xmlhttp= nuevo ActiveXObject('Microsoft.XMLHTTP');
}captura(e){
intentar{
ajax_xmlhttp= nuevo XMLHttpRequest();
}catch(e){ajax_xmlhttp=null;}
}
}
/////////////////////////Crear capa de mensaje////////////////////// // /
función crearajaxdiv(){
var create_div = document.createElement(div);
crear_div.tipo = div;
var Promptdiv = document.body.appendChild(create_div);
Promptdiv.className = ajaxsearch;
obj_div=promptdiv;
}
//////////////////////////Establecer la posición de la capa de solicitud/////////////////// //// //
función eliminadaiv(){
if(!obj_div || !obj_input)devuelve falso;
si (obj_div.style.display==none) devuelve falso;
varobj=obj_input;
var xtop=0;
varxizquierda=0;
mientras(obj){
xtop += obj[desplazamientoTop];
xizquierda += obj[desplazamientoIzquierda];
obj = obj.offsetParent;
}
obj_div.style.left = xleft + px;
obj_div.style.top = (xtop + 20) + px; // 20 es casi la altura del cuadro de entrada, ajústelo según la situación real ***************** ****** ****************************************8
li_down=-1;
}
/////////////////////////Ocultar capa de mensaje////////////////////// // /
función ocultarajaxdiv(){
obj_div.style.display=ninguno;
li_down=-1;
}
///////////////////////////Establecer el <li>estilo CSS seleccionado///////////////// /// //////
función setlistyle(){
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;
}
//////////////////////////El mouse pasa a través de la capa de solicitud///////////////// ////// //
función overli(Fun_seletedlinum){
if(li_num==-1)value_ing=obj_input.value;
li_num=Diversión_seletedlinum;
setliestilo();
}
///////////////////////////Capa de solicitud de arrastre del mouse//////////////////// // ///
función moverli(){
si(ventana.getSelection){
establecer foco();
ventana.getSelection().removeAllRanges();
}demás{
documento.selección.empty();
establecer foco();
}
}
///////////////////////////Capa de solicitud de pulsación del ratón//////////////////// // ///
función downli(Fun_seletedlinum){
si (! obj_input) devuelve falso;
li_down=Diversión_seletedlinum;
input_focus=verdadero;
}
//////////////////////////Capa de mensaje emergente del mouse////////////////// //// ///
función upli(Fun_seletedlinum,Fun_event){
si (! obj_input) devuelve falso;
if(Fun_event.button==2){li_down=-1;return}
if(li_down!=Fun_seletedlinum){
li_down=-1;
devolver falso;
}
clearTimeout(ajax_delay);
clearTimeout(updown_delay);
updown_run=verdadero;
ajax_run=falso;
ajax_run_ing=false;
número_li=-1;
div_word=nulo;
value_ed=obj_div.firstChild.childNodes[Fun_seletedlinum].childNodes[1].nodeValue;
obj_input.value=valor_ed;
value_ing=valor_ed;
ocultarajaxdiv();
obj_div.innerHTML=;
}
//////////////////////////Establecer el cuadro de texto para obtener el foco///////////////// ///// //
función establecer enfoque(){
si(ventana.evento){
var r = obj_input.createTextRange();
r.moveStart('personaje',obj_input.value.length);
r.collapse(verdadero);
r.select();
}demás{
obj_input.selectionStart=obj_input.value.length;
obj_input.focus();
}
}
///////////////////////////El cuadro de texto pierde el foco/////////////////// //// //
función borrosa(){
si(input_focus==verdadero){
establecer foco();
setTimeout(setfocus());
devolver falso;
}
updown_run=falso;
ajax_run=falso;
ajax_run_ing=false;
clearInterval(main_delay);
clearTimeout(ajax_delay);
clearTimeout(updown_delay);
ocultarajaxdiv();
if(value_ed!=obj_input.value)obj_div.innerHTML=;
}
//////////////////////////El cuadro de texto recibe el foco//////////////////// /// //
función focusdeal(Fun_event){
if(!obj_div)createajaxdiv();
si(input_focus==verdadero){
input_focus=falso;
devolver falso;
}
var obj=((window.event)?Fun_event.srcElement:Fun_event.target);
si (obj.type! = texto) devuelve falso;
updown_run=verdadero;
ajax_run=verdadero;
ajax_run_ing=false;
if(obj_input==obj && value_ed==obj.value && obj_div.innerHTML!=){
obj_div.style.display=bloque;
eliminadoiv();
}demás{
obj_input=obj;
value_ed=obj.valor;
value_ing=obj.valor;
valor_unexit=;
número_li=-1;
li_down=-1;
div_word=nulo;
obj_div.innerHTML=;
eliminadoiv();
}
main_delay=setInterval(mainajax(),10);
}
/////////////////////////Función principal /////////////////////// ///
función principalajax(){
if(value_ed==obj_input.value)devuelve 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=verdadero;
value_ed=obj_input.valor;
clearTimeout(ajax_delay);
si(obj_input.valor!=){
ajax_delay=setTimeout(getsearch();,time_delayajax);
}demás{
ocultarajaxdiv();
obj_div.innerHTML=;
ajax_run=falso;
devolver falso;
}
}
}
/////////////////////////Obtener contenido de búsqueda////////////////////// /// /
función obtener búsqueda(){
var temp_value=obj_input.value;
si(ajax_xmlhttp==null){
devolver falso;
}si no (ajax_xmlhttp.readyState!=0){
ajax_xmlhttp.abort();
ajax_run_ing=false;
}
ajax_xmlhttp.onreadystatechange=función(){
if(ajax_run==false){ajax_xmlhttp.abort();ajax_run_ing=false;return false;}
si(ajax_xmlhttp.readyState==4){
obj_div.innerHTML=;
si(ajax_xmlhttp.status==200 || ajax_xmlhttp.status==304){
var contenido=ajax_xmlhttp.responseText;
if(contante!= && ajax_run==true){
div_word=valor_temp;
obj_div.innerHTML=resetcontant(contante);
obj_div.style.display=bloque;
eliminadoiv();eliminadodiv();
}demás{
ocultarajaxdiv();
}
updown_run=verdadero;
ajax_run_ing=false;
número_li=-1;
if(contante==)value_unexit=temp_value;
}
}
}
ajax_xmlhttp.open(publicación,url,verdadero);
ajax_xmlhttp.setRequestHeader('Tipo de contenido','aplicación/x-www-form-urlencoded');
ajax_run_ing=verdadero;
ajax_xmlhttp.send(sift_value=+escape(temp_value)); //El valor enviado al fondo****************************** * ***********
}
/////////////////////////Reorganización de contenido//////////////////////// //
función resetcontant(Fun_contant){
if(Contante_divertido==null ||Contante_divertido==)return;
var a=Fun_contant.substring(1,Fun_contant.length-1);
if(Contante_divertido==null ||Contante_divertido==)return;
var b=a.split('');
var c;
vard;
d=<ul>;
para(var i en b){
c=b[i].split(,);
//************************************************ ***************
d=d+<li onmouseover=/overli(+i+);/ onmousedown=/downli(+i+)/ onmouseup=/upli(+i+,event)/ onmousemove=/moveli();/><span>acerca de +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( );/>Cerrar</a></span></li>
d=d+</ul>;
regresar d;
}
//////////////////////////Eventos de teclado/////////////////////// ////
función keydowndeal(Fun_event){
var keyc=((ventana.event)?Fun_event.keyCode:Fun_event.cuál);
if(keyc==13){hideajaxdiv();return false;}
si(clavec==27){
if(obj_div.style.display==block && li_num>-1)value_ed=obj_input.value=value_ing;
ocultarajaxdiv();
devolver falso;
}
si(clavec==40 || clavec==38){
if(div_word==obj_input.value && obj_div.style.display==none && obj_div.innerHTML!=){
obj_div.style.display=bloque;
eliminadoiv();
devolver falso;
}
si(li_num==-1){
si (div_word! = obj_input.value) devuelve falso;
}demás{
if(div_word!=value_ing)devuelve falso;
}
if(updown_run==false || ajax_run_ing==true || obj_div.style.display==none)devuelve falso;
updown_delay=setTimeout(updownli(+keyc+),time_delayupdown);
updown_run=falso;
}
}
//////////////////////////Movimiento de la tecla de dirección li//////////////////// /// //
función updownli(Fun_key){
if(!obj_div){return false;}
updown_run=verdadero;
si(li_num==-1){
if(div_word!=obj_input.value){hideajaxdiv();obj_div.innerHTML=;li_num=-1;return false;}
}demás{
if(div_word!=value_ing){hideajaxdiv();obj_div.innerHTML=;li_num=-1;return false;}
}
si(updown_run==false)devuelve falso;
if(li_num==-1)value_ing=value_ed;
si(Fun_key==40){
if(li_num<obj_div.firstChild.childNodes.length-2){
li_num++;
}demás{
número_li=-1;
}
}
si(Fun_key==38){
si(li_num>=0){
li_num--;
}demás{
li_num=obj_div.firstChild.childNodes.length-2;
}
}
si(li_num!=-1){
value_ed=obj_input.value=obj_div.firstChild.childNodes[li_num].childNodes[1].nodeValue;
}demás{
value_ed=obj_input.value=value_ing;
}
setliestilo();
}
fondo ajax.asp
Copie el código de código de la siguiente manera:
<%@LANGUAGE=PÁGINA DE CÓDIGOS VBSCRIPT=65001 %>
<%opción explícita%>
<%Response.CodePage=65001%>
<%Response.Charset=utf-8 %>
<!--#include file=conn.asp-->
<%
valor_dimSift
atenuar Sql,Rs,I,Núm
tenueContante
Contenido=
Número=10
Sift_value=replace(unescape(request.form(sift_value)),,)
Sql=seleccione la palabra clave principal &Num&, matchnum de la búsqueda donde la palabra clave como &Sift_value&% ordene por id
establecer Rs=servidor.CreateObject(adodb.recordset)
Rs.open Sql,Conn,1,1
si no (Rs.eof y Rs.bof), entonces
para I=0 a Núm-1
Contante=Contante&'&rs(0)&,&rs(1)&'
Rs.
si Rs.eof entonces salga por
próximo
terminar si
respuesta.Escribir(Contante)
Rs.cerrar
establecer Rs = nada
%>