Datenbanktabelle: Inhalt in die Zwischenablage kopieren Code:
CREATE TABLE `xqbar`.`suggest` (
`id` INT NOT NULL AUTO_INCREMENT ,
`title` VARCHAR( 100 ) NOT NULL ,
`hits` INT NOT NULL DEFAULT '0',
PRIMÄRSCHLÜSSEL („id“)
) ENGINE = InnoDB
insert into suggest(title,hits)values('xqbar.com',100);
einfügen in suggest(title,hits)values('www.xqbar.com',410);
einfügen in suggest(title,hits)values('http://xqbar.com',700);
einfügen in suggest(title,hits)values('mail:xqbar.com',200);
einfügen in suggest(title,hits)values('ftp:xqbar.com',100);
Einfügen in suggest(title,hits)values('http://www.xqbar.com',70)search.php
(Ich bin seit langem nicht mehr mit PHP in Kontakt gekommen. Wenn das folgende PHP zu wortreich ist, würde ich gerne den Rat eines Experten einholen.)
Die zurückgegebene Informationszeichenfolge sollte xxx1|xxx2$200|100 lauten. Der entsprechende Kopierinhalt in den Zwischenablagecode davor und danach:
<?php
if($_GET["action"]!=''){
#Erhalten Sie die vom Benutzer eingegebenen Schlüsselwörter
$keyword=$_GET["keyword"];
#Schlüsselwörter filtern
$keyword=str_replace("[","[[]",$keyword);
$keyword=str_replace("&","[&]",$keyword);
$keyword=str_replace("%","[%]",$keyword);
$keyword=str_replace("^","[^]",$keyword);
#Link-Datenbank
$conn=mysql_connect("localhost","xqbar","xqbaradmin");
#Datenbank auswählen
@mysql_select_db("xqbar") or die('sorry');
mysql_query('Namen utf-8 festlegen');
#query-Anweisung
$sql="select title,hits from schlagen vor, wo Titel wie '%".$keyword."%' order by hits desc limit 10";
$result=mysql_query($sql);
#Schleife, um die Abfrageergebnisse abzurufen und eine Zeichenfolge zurückzugeben
#Das Format ist Ergebnis 1|Ergebnis 2$Anzahl der Klicks von Ergebnis 1|Anzahl der Klicks von Ergebnis 2
if($result){
$i=1;$title='';$hits='';
while($row=mysql_fetch_array($result,MYSQL_BOTH))
{
$title=$title.$row['title'];
$hits=$hits.$row['hits'];
if($i<mysql_num_rows($result))
{
$title=$title."|";
$hits=$hits."|";
}
$i++;
}
}
mysql_close();
}
?>
<?php echo $title.'$'.$hits;?>JS-Code zum Kopieren von Inhalten in die Zwischenablage:
Nach der Einführung von prototye.js sagten einige Freunde, dass diese Bibliothek zu groß sei oder dass Sie, wenn Sie nicht daran gewöhnt seien, das jquery.js-Framework verwenden oder direkt ein Ajax-Objekt erstellen könnten . Hier zitiere ich direkt das prototye.js-Framework.
<script type="text/javascript" src="prototype.js"></script>
js-Code zum Erstellen von Ebenen und Anzeigen von Abfrageergebnissen
<script type="text/javascript">
//Definieren Sie die Variable lastindex, um die Position darzustellen, an der die Maus über das Abfrageergebnis gleitet, zunächst -1
var lastindex=-1;
//Definieren Sie das Variablenflag, um anzugeben, ob eine Ajax-Abfrage basierend auf den vom Benutzer eingegebenen Schlüsselwörtern durchgeführt werden soll. „Falsch“ bedeutet, dass die Abfrage zulässig ist, und „True“, was bedeutet, dass die Abfrage verboten ist.
var flag=false;
//Die Länge des Arrays, das durch die zurückgegebenen Abfrageergebnisse generiert wird
var listlength=0;
//Erstellen Sie eine benutzerdefinierte Zeichenfolge, um die Effizienz zu optimieren
Funktion StringBuffer(){this.data=[];}
//Abtretung
StringBuffer.prototype.append=function(){this.data.push(arguments[0]);return this;}
//Ausgabe
StringBuffer.prototype.tostring=function(){return this.data.join("");}
// Leerzeichen auf beiden Seiten der Zeichenfolge entfernen
String.prototype.Trim = function(){return this.replace(/(^s*)|(s*$)/g, "");}
// Die versteckte Funktion besteht hauptsächlich darin, die angezeigte Dropdown-Ebene und den Iframe der Eingabeaufforderung auszublenden. Die Funktion von Iframe wird weiter unten erläutert.
Funktion Hiddensearch()
{
$('rlist').style.display="none";
$('rFrame').style.display="none";
}
// Die Anzeigefunktion zeigt hauptsächlich die Eingabeaufforderungs-Dropdown-Ebene und den Iframe-Parameter num an. Gemäß diesem Parameter wird die Höhe der anzuzeigenden Eingabeaufforderungsebene und des Iframes gesteuert.
Funktion showsearch(num)
{
$('rlist').style.display='';
$('rFrame').style.display='';
//Hier definiere ich die Eingabeaufforderungshöhe jedes zurückgegebenen Abfrageergebnisses als 20 Pixel und die Gesamthöhe der Eingabeaufforderungsebene wird zu num hinzugefügt, da ich beim Definieren des Stils eine Auffüllung um ein Pixel verwendet habe.
$('rlist').style.height=num*20+num+'px';
//Positionieren Sie außerdem die Höhe des Iframes
$('rFrame').style.height=num*20+num+'px';
}
//Gibt die Koordinatenfunktion des Texteingabefelds zurück. Das Parameterelement ist das zurückzugebende Objekt. Der Parameteroffset kann offsetLeft|offsetTop sein, der jeweils die absolute Position des Objekts von der oberen Ecke des linken Fensters darstellt.
//www.devdao.com Verwenden Sie diese Funktion, um die Eingabeaufforderungsebene zu finden, die wir anzeigen möchten, sodass die Eingabeaufforderungsebene korrekt unter dem Texteingabefeld angezeigt wird
Funktion getposition(element,offset)
{
var c=0;
while(element)
{
c+=element[offset];
element=element.offsetParent
}
return c;
}
//Die Funktion zum Erstellen der Eingabeaufforderungsebene umfasst die Eingabeaufforderungsebene. Um zu vermeiden, dass das Auswahl-Dropdown-Feld unter dem Texteingabefeld angezeigt wird, kann unsere Eingabeaufforderungsebene den darüber liegenden Iframe nicht mehr auswählen.
// Es versteht sich, dass, wenn sich unter dem Texteingabefeld ein Auswahl-Dropdown-Feld befindet, es sich um die Ebene „Auswahl-Dropdown-Box-Iframe-Eingabeaufforderung“ von unten nach oben handelt.
Funktion createlist()
{
//Eingabeaufforderungsebene erstellen
var listDiv=document.createElement("div");
//Prompt-Layer-ID
listDiv.id="rlist";
listDiv.style.zIndex="2";
listDiv.style.position="absolute";
listDiv.style.border="solid 1px #000000";
listDiv.style.backgroundColor="#FFFFFF";
listDiv.style.display="none";
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"
;
listFrame.id="rFrame";
listFrame.style.zIndex="1";
listFrame.style.position="absolute";
listFrame.style.border="0";
listFrame.style.display="none";
listFrame.style.width=$('keyword').clientWidth+"px";
listFrame.style.left=getposition($('keyword'),'offsetLeft')+1+"px";
listFrame.style.top =(getposition($('keyword'),'offsetTop')+$('keyword').clientHeight +3)+"px";
document.body.appendChild(listDiv);
document.body.appendChild(listFrame);
}
Funktion setstyle(element,classname)
{
switch(Klassenname)
{
Fall 'm':
element.style.fontSize="12px";
element.style.fontFamily="arial,sans-serif";
element.style.backgroundColor="#3366cc";
element.style.color="schwarz";
element.style.width=$('keyword').clientWidth-2+"px";
element.style.height="20px";
element.style.padding="1px 0px 0px 2px";
if(element.displaySpan)element.displaySpan.style.color="white"
brechen;
Fall 'd':
element.style.fontSize="12px";
element.style.fontFamily="arial,sans-serif";
element.style.backgroundColor="white";
element.style.color="schwarz";
element.style.width=$('keyword').clientWidth-2+"px";
element.style.height="20px";
element.style.padding="1px 0px 0px 2px";
if(element.displaySpan)element.displaySpan.style.color="grün"
brechen;
Fall 't':
element.style.width="80%";
if(window.navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)element.style.cssFloat="left";
else element.style.styleFloat="left";
element.style.whiteSpace="nowrap";
element.style.overflow="versteckt";
element.style.textOverflow="ellipsis";
element.style.fontSize="12px";
element.style.textAlign="left";
brechen;
Fall 'h':
element.style.width="20%";
if(window.navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)element.style.cssFloat="right";
else element.style.styleFloat="right";
element.style.textAlign="right";
element.style.color="grün";
brechen;
}
}
Funktion focusitem(index)
{
if($('item'+lastindex)!=null)setstyle($('item'+lastindex),'d');
if($('item'+index)!=null)
{
setstyle($('item'+index), 'm');
lastindex=index;
}
sonst $("keyword").focus();
}
Funktion searchclick(index)
{
$("keyword").value=$('title'+index).innerHTML;
flag=true;
}
Funktion searchkeydown(e)
{
if($('rlist').innerHTML=='')return;
var keycode=(window.navigator.appName=="Microsoft Internet Explorer")?event.keyCode:e.which;
//runter
if(keycode==40)
{
if(lastindex==-1||lastindex==listlength-1)
{
Fokuselement(0);
Suchklick(0);
}
anders{
focusitem(lastindex+1);
searchclick(lastindex+1);
}
}
if(keycode==38)
{
if(lastindex==-1)
{
Fokuselement(0);
Suchklick(0);
}
anders{
focusitem(lastindex-1);
searchclick(lastindex-1);
}
}
if(keycode==13)
{
focusitem(lastindex);
$("keyword").value=$('title'+lastindex).innerText;
}
if(keycode==46||keycode==8){flag=false;ajaxsearch($F('keyword').substring(0,$F('keyword').length-1).Trim()); }
}
Funktion showresult(xmlhttp)
{
var result=unescape(xmlhttp.responseText);
if(result!=''){
var resultstring=new StringBuffer();
var title=result.split('$')[0];
var hits=result.split('$')[1];
for(var i=0;i<title.split('|').length;i++)
{
resultstring.append('<div id="item'+i+'" onmousemove="focusitem('+i+')" onmousedown="searchclick('+i+')">');
resultstring.append('<span id=title'+i+'>');
resultstring.append(title.split('|'));
resultstring.append('</span>');
resultstring.append('<span id=hits'+i+'>');
resultstring.append(hits.split('|'));
resultstring.append('</span>');
resultstring.append('</div>');
}
$('rlist').innerHTML=resultstring.tostring();
for(var j=0;j<title.split('|').length;j++)
{
setstyle($('item'+j),'d');
$('item'+j).displaySpan=$('hits'+j);
setstyle($('title'+j),'t');
setstyle($('hits'+j),'h');
}
showsearch(title.split('|').length);
listlength=title.split('|').length;
lastindex=-1;
}
sonst versteckte Suche();
}
Funktion ajaxsearch(value)
{
new Ajax.Request('search.php',{method:"get",parameters:"action=do&keyword="+escape(value),onComplete:showresult});
}
Funktion main()
{
$('keyword').className=$('keyword').className=='inputblue'?'inputfocus':'inputblue';
if($F('keyword').Trim()=='')hiddensearch();
anders
{
if($F('keyword')!=''&&flag==false)ajaxsearch($F('keyword').Trim());
if(listlength!=0)$('keyword').onkeydown=searchkeydown;
sonst versteckte Suche();
}
}
Funktion oninit()
{
$('keyword').autocomplete="off";
$('keyword').onfocus=main;
$('keyword').onkeyup=main;
$('keyword').onblur=hiddensearch;
createlist();
}
Event.observe(window,'load',oninit);
</script>Inhalt des Suchfelds in den Zwischenablagecode kopieren:
<form id="form1" name="form1" method="post" action="">
<b>Geben Sie Suchbegriffe ein</b>
<input name="keyword" type="text" class="inputblue" id="keyword" maxlength="20" style="width:300px;" />
</form>