invites de recherche ajax

Auteur：Eve Cole Date de mise à jour：2009-06-07 14:56:52

Table de base de données : copier le contenu dans le code du presse-papiers :

CREATE TABLE `xqbar`.`suggest` (
`id` INT NON NULL AUTO_INCREMENT ,
`titre` VARCHAR( 100 ) NON NULL ,
`hits` INT NON NULL PAR DÉFAUT '0',
CLÉ PRIMAIRE (`id`)
) MOTEUR = InnoDB

insérer dans suggest(title,hits)values('xqbar.com',100);
insérer dans suggest(title,hits)values('www.xqbar.com',410);
insérer dans suggest(title,hits)values('http://xqbar.com',700);
insérer dans suggest(title,hits)values('mail:xqbar.com',200);
insérer dans suggest(title,hits)values('ftp:xqbar.com',100);
insérer dans suggest(title,hits)values('http://www.xqbar.com',70)search.php
(Je n'ai pas été exposé à PHP depuis longtemps. Si le PHP ci-dessous est trop verbeux, j'aimerais avoir l'avis d'un expert)
La chaîne d'informations renvoyée doit être xxx1|xxx2$200|100. Le contenu de la copie correspondant dans le code du presse-papiers avant et après :

<?php.
si($_GET["action"]!=''){
#Récupérer les mots-clés saisis par l'utilisateur
$mot-clé=$_GET["mot-clé"];
#Filtrer les mots-clés
$keyword=str_replace("[","[[]",$keyword);
$keyword=str_replace("&","[&]",$keyword);
$keyword=str_replace("%","[%]",$keyword);
$keyword=str_replace("^","[^]",$keyword);
#Base de données de liens
$conn=mysql_connect("localhost","xqbar","xqbaradmin");
#Sélectionner la base de données
@mysql_select_db("xqbar") ou die('sorry');
mysql_query('définir les noms utf-8');
#instruction de requête
$sql="sélectionner le titre, les accès à partir de suggérer où le titre est comme '%".$mot-clé."%' ordre par accès desc limite 10";
$result=mysql_query($sql);
#Boucle pour obtenir les résultats de la requête et renvoyer une chaîne
#Le format est Résultat 1|Résultat 2$Nombre de clics du Résultat 1|Nombre de clics du Résultat 2
si($résultat){
$i=1;$titre='';$hits='';
while($row=mysql_fetch_array($result,MYSQL_BOTH))
{
$titre=$titre.$row['titre'];
$hits=$hits.$row['hits'];
si($i<mysql_num_rows($result))
{
$titre=$titre."|";
$hits=$hits."|";
}
$i++;
}
}
mysql_close();
}
?>
<?php echo $title.'$'.$hits;?>code js pour copier le contenu dans le code du presse-papiers :

Après avoir présenté prototye.js, certains amis ont dit que cette bibliothèque était trop grande, ou que si vous n'y êtes pas habitué, vous pouvez utiliser le framework jquery.js ou créer directement un objet ajax. Je ne veux pas en parler. . Ici, je cite directement le framework prototye.js.
<script type="text/javascript" src="prototype.js"></script>
code js pour créer des couches et afficher les résultats de la requête
<script type="text/javascript">
//Définissez la variable lastindex pour représenter la position où la souris glisse sur le résultat de la requête, initialement -1
var dernierindex=-1;
//Définissez l'indicateur de variable pour indiquer s'il faut effectuer une requête ajax en fonction des mots-clés saisis par l'utilisateur. false signifie que la requête est autorisée et true signifie que la requête est interdite.
var drapeau = faux ;
//La longueur du tableau généré par les résultats de la requête renvoyés
var longueur de liste = 0 ;
//Créer une chaîne personnalisée pour optimiser l'efficacité
fonction StringBuffer(){this.data=[];}
//affectation
StringBuffer.prototype.append=function(){this.data.push(arguments[0]);renvoie ceci;}
//Sortir
StringBuffer.prototype.tostring=function(){return this.data.join("");}
// Supprime les espaces des deux côtés de la chaîne
String.prototype.Trim = function(){return this.replace(/(^s*)|(s*$)/g, "");}
//La fonction cachée consiste principalement à masquer le calque déroulant d'invite affiché et l'iframe. La fonction de l'iframe sera discutée ci-dessous.
fonction recherche cachée()
{
$('rlist').style.display="aucun";
$('rFrame').style.display="aucun";
}
//La fonction d'affichage affiche principalement le calque déroulant d'invite et le paramètre iframe num. Selon ce paramètre, la hauteur du calque d'invite et de l'iframe à afficher est contrôlée.
fonction showsearch (num)
{
$('rlist').style.display='';
$('rFrame').style.display='';
//Ici, je définis la hauteur d'invite de chaque résultat de requête renvoyé comme 20px, et la hauteur totale de la couche d'invite est ajoutée à num car j'ai utilisé un remplissage d'un pixel lors de la définition du style.
$('rlist').style.height=num*20+num+'px';
//Positionnez également la hauteur de l'iframe
$('rFrame').style.height=num*20+num+'px';
}
//Renvoie la fonction de coordonnées de la zone de saisie de texte. L'élément paramètre est l'objet à renvoyer. Le paramètre offset peut être offsetLeft|offsetTop, qui représentent respectivement la position absolue de l'objet à partir du coin supérieur de la fenêtre gauche.
//www.devdao.com Utilisez cette fonction pour localiser la couche d'invite que nous souhaitons afficher, afin que la couche d'invite soit correctement affichée sous la zone de saisie de texte
fonction getposition (élément, décalage)
{
var c = 0 ;
tandis que (élément)
{
c+=élément[décalage];
element=element.offsetParent
}
retourner c;
}
//La fonction pour créer le calque d'invite inclut le calque d'invite et afin d'éviter que la liste déroulante de sélection n'apparaisse sous la zone de saisie de texte, notre calque d'invite ne peut plus sélectionner l'iframe au-dessus.
// On peut comprendre que lorsqu'il y a une liste déroulante de sélection sous la zone de saisie de texte, il s'agit du calque d'invite de boîte déroulante iframe de sélection de bas en haut.
fonction createlist()
{
//Créer une couche d'invite
var listDiv=document.createElement("div");
//ID de couche d'invite
listDiv.id="rlist";
listDiv.style.zIndex="2";
listDiv.style.position="absolu";
listDiv.style.border="solide 1px #000000";
listDiv.style.backgroundColor="#FFFFFF";
listDiv.style.display="aucun";
listDiv.style.width=$('keyword').clientWidth+"px";
listDiv.style.left=getposition($('keyword'),'offsetLeft')+1.5+"px";
listDiv.style.top =(getposition($('keyword'),'offsetTop')+$('keyword').clientHeight +3)+"px";

<form id="form1" name="form1" method="post" action="">
<b>Saisissez des mots-clés de recherche</b>
<input name="keyword" type="text" class="inputblue" id="keyword" maxlength="20" style="width:300px;"
</form>