mensajes de búsqueda ajax

Autor：Eve Cole Fecha de actualización：2009-06-07 14:56:52

Tabla de base de datos: Copie el contenido al código del portapapeles:

CREAR TABLA `xqbar`.`suggest` (
`id` INT NO NULL AUTO_INCREMENT,
`título` VARCHAR(100) NO NULO,
`hits` INT NOT NULL DEFAULT '0',
CLAVE PRIMARIA (`id`)
) MOTOR = Insertar InnoDB

en valores sugeridos (título, visitas) ('xqbar.com', 100);
insertar en sugerir (título, visitas) valores ('www.xqbar.com', 410);
insertar en sugerir(título, visitas) valores ('http://xqbar.com',700);
insertar en sugerir(título, visitas)valores('mail:xqbar.com',200);
insertar en sugerir(título, visitas) valores ('ftp:xqbar.com',100);
insertar en sugerir (título, visitas) valores ('http://www.xqbar.com', 70) search.php
(No he estado expuesto a PHP durante mucho tiempo. Si el PHP a continuación tiene demasiadas palabras, me gustaría recibir el consejo de un experto)
La cadena de información devuelta debe ser xxx1|xxx2$200|100. El contenido de la copia correspondiente al código del portapapeles antes y después:

<?php.
si($_GET["acción"]!=''){
#Obtener las palabras clave ingresadas por el usuario
$palabra clave=$_GET["palabra clave"];
#Filtrar palabras clave
$palabra clave=str_replace("[","[[]",$palabra clave);
$palabra clave=str_replace("&","[&]",$palabra clave);
$palabra clave=str_replace("%","[%]",$palabra clave);
$palabra clave=str_replace("^","[^]",$palabra clave);
#Enlace a base de datos
$conn=mysql_connect("localhost","xqbar","xqbaradmin");
#Seleccionar base de datos
@mysql_select_db("xqbar") o die('lo siento');
mysql_query('establecer nombres utf-8');
# declaración de consulta
$sql="seleccione título, visitas de sugerir dónde título como '%".$palabra clave."%' ordenar por visitas límite de descripción 10";
$resultado=mysql_query($sql);
#Bucle para obtener los resultados de la consulta y devolver una cadena
#El formato es Resultado 1|Resultado 2$Número de clics del Resultado 1|Número de clics del Resultado 2
si($resultado){
$i=1;$título='';$hits='';
mientras($fila=mysql_fetch_array($resultado,MYSQL_BOTH))
{
$título=$título.$fila['título'];
$golpes=$golpes.$fila['golpes'];
si($i<mysql_num_rows($resultado))
{
$título=$título."|";
$golpes=$golpes."|";
}
$yo++;
}
}
mysql_close();
}
?>
<?php echo $title.'$'.$hits;?>código js para copiar el contenido al código del portapapeles:

Después de presentar prototye.js, algunos amigos dijeron que esta biblioteca es demasiado grande o que si no estás acostumbrado, puedes usar el marco jquery.js o crear directamente un objeto ajax. Aquí cito directamente el marco prototye.js.
<script tipo="text/javascript" src="prototype.js"></script>
código js para crear capas y mostrar resultados de consultas
<tipo de script="texto/javascript">
//Definimos la variable lastindex para representar la posición donde se desliza el mouse sobre el resultado de la consulta, inicialmente -1
var lastindex=-1;
//Defina el indicador de variable para indicar si se realiza una consulta ajax en función de las palabras clave ingresadas por el usuario. Falso significa que la consulta está permitida y verdadero significa que la consulta está prohibida.
var bandera = falso;
//La longitud de la matriz generada por los resultados de la consulta devuelta
var longitud de lista=0;
//Crea una cadena personalizada para optimizar la eficiencia
función StringBuffer(){this.data=[];}
//asignación
StringBuffer.prototype.append=function(){this.data.push(argumentos[0]);devuelve esto;}
//Producción
StringBuffer.prototype.tostring=function(){return this.data.join("");}
//Elimina espacios a ambos lados de la cadena
String.prototype.Trim = function(){return this.replace(/(^s*)|(s*$)/g, "");}
// La función oculta es principalmente ocultar la capa desplegable del mensaje mostrado y el iframe. La función del iframe se analizará a continuación.
función búsqueda oculta()
{
$('rlist').style.display="none";
$('rFrame').style.display="none";
}
// La función de visualización muestra principalmente la capa desplegable del mensaje y el número de parámetro del iframe. De acuerdo con este parámetro, se controla la altura de la capa del mensaje y el iframe que se mostrarán.
función mostrarbúsqueda(núm)
{
$('rlist').style.display='';
$('rFrame').style.display='';
// Aquí defino la altura del mensaje de cada resultado de consulta devuelto como 20 px, y la altura total de la capa del mensaje se agrega a num porque usé un relleno de un píxel al definir el estilo.
$('rlist').style.height=num*20+num+'px';
//Coloca también la altura del iframe
$('rFrame').style.height=num*20+num+'px';
}
// Devuelve la función de coordenadas del cuadro de entrada de texto. El elemento del parámetro es el objeto a devolver. El desplazamiento del parámetro puede ser offsetLeft|offsetTop, que representa respectivamente la posición absoluta del objeto desde la esquina superior de la ventana izquierda.
//www.devdao.com Utilice esta función para ubicar la capa de solicitud que queremos mostrar, de modo que la capa de solicitud se muestre correctamente debajo del cuadro de entrada de texto
función obtener posición (elemento, desplazamiento)
{
varc=0;
mientras (elemento)
{
c+=elemento[desplazamiento];
elemento=elemento.offsetParent
}
devolver c;
}
//La función para crear la capa de solicitud incluye la capa de solicitud y, para evitar que aparezca el cuadro desplegable de selección debajo del cuadro de entrada de texto, nuestra capa de solicitud ya no puede seleccionar el iframe que se encuentra encima de ella.
// Se puede entender que cuando hay un cuadro desplegable de selección debajo del cuadro de entrada de texto, es la capa del cuadro desplegable de selección-iframe-prompt de abajo hacia arriba.
función crear lista()
{
//Crear capa de aviso
var listDiv=document.createElement("div");
//ID de capa inmediata
listDiv.id="rlista";
listDiv.style.zIndex="2";
listDiv.style.position="absoluta";
listDiv.style.border="sólido 1px #000000";
listDiv.style.backgroundColor="#FFFFFF";
listDiv.style.display="ninguno";
listDiv.style.width=$('palabra clave').clientWidth+"px";
listDiv.style.left=getposition($('palabra clave'),'offsetLeft')+1.5+"px";
listDiv.style.top =(getposition($('palabra clave'),'offsetTop')+$('palabra clave').clientHeight +3)+"px";

<form id="form1" name="form1" método="post" action="">
<b>Ingrese las palabras clave de búsqueda</b>
<nombre de entrada="palabra clave" tipo="texto" clase="inputblue" id="palabra clave" maxlength="20" estilo="ancho:300px;"
</formulario>