jquery PHP implementiert die automatische Eingabeaufforderung für das Suchfeld prompt_jquery

Heute möchte ich plötzlich eine Suchseite für diese Website erstellen, damit Benutzer ihre Lieblingsinhalte über die Suche finden und die Mühe vermeiden können, Ressourcen in umfangreichen Informationen manuell zu finden. Mein Ziel ähnelt dem Effekt der Baidu-Homepage. Wenn der Benutzer den Text eingibt, nach dem er suchen möchte, stellen wir unten zehn relevante Informationen bereit. Wenn der Benutzer nach einer dieser zehn Informationen sucht, reicht es aus, die Seite auf einer neuen Seite zu öffnen. Der Hauptgrund besteht darin, die Seite benutzerfreundlicher zu gestalten und sie für Benutzer bequemer zu nutzen.

Schauen wir uns zunächst die Renderings an. Das gibt Ihnen mehr Motivation, sonst wissen Sie nicht, wovon ich spreche und welchen Effekt ich erzielen möchte!

jquery php realisiert die automatische Abfrage des Suchfelds

Im Folgenden wird hauptsächlich das Prinzip erklärt:

Wenn der Benutzer auf der Seite „search.html“ „j“ in das Suchfeld eingibt, verwenden Sie Javascript, um den Textinhalt des Suchfelds abzurufen, suchen Sie nach relevanten Inhalten in der Datenbank und geben Sie ihn zurück, und verwenden Sie dann Javascript, um Zeigen Sie die vom Server zurückgegebenen Ergebnisse an. Das Eingabeaufforderungsfeld unter dem Suchfeld dient Benutzern zur Referenzauswahl.

Spezifische Implementierungsmethode:

Erstellen Sie zunächst ein Suchfeld, eine Suchschaltfläche und eine Suchaufforderungsebene auf der Seite, wie unten gezeigt

Code kopieren Der Code lautet wie folgt:

Verwenden Sie den Browser, um die Seite zu durchsuchen, und Sie werden den unten gezeigten Effekt sehen
jquery php implementiert automatische Eingabeaufforderungen, wenn Benutzer Suchinhalte eingeben
Es sieht sehr gewöhnlich aus und hat keinen Stil. Jetzt nehmen wir einige Anpassungen am Stil vor

Code kopieren Der Code lautet wie folgt:

#search{font-size:14px;}
#search .k{padding:2px 1px; width:320px;} /*Die Breite des Suchfelds vergrößern*/

Passen Sie den Stil der Ebene an, die die Suchaufforderung anzeigt. Da sich die Suchaufforderungsebene direkt unter dem Suchfeld befindet, stellen wir ihre Positionierungsmethode auf absolute Positionierung ein.

Positionierungsmethode*/
Platzieren Sie dann mit JS die Suchaufforderungsebene direkt unter dem Suchfeld. Die Breite entspricht der des Suchfelds. Hier verwenden wir jQuery, um das Problem zu lösen

Code kopieren Der Code lautet wie folgt:

$('#search_auto').css({'width':$('#search input[name="k"]').width() 4});

Die Position und Breite der Suchaufforderungsebene wurde festgelegt. Da das Eingabeaufforderungsfeld nicht angezeigt wird, bevor der Benutzer den Suchtext eingibt, müssen wir es zunächst auf „Ausgeblendet“ setzen und die Anzeige zum Stil der Eingabeaufforderungsebene hinzufügen : keiner verbirgt es.

Alles ist in Ordnung. Jetzt müssen wir das Ereignis nur noch für das Onkeyup des Suchfelds registrieren. In jQuery ist es Keyup

Code kopieren Der Code lautet wie folgt:

$('#search input[name="k"]').keyup(function(){
$.post('search_auto.php',{'value':$(this).val()},function(data){ //Beitragsdaten an search_auto.php auf dem Server senden, $.post ist eine jQuery-Methode
if(data=='0') $('#search_auto').html('').css('display','none'); //Beurteilen Sie die auf dem Server zurückgegebenen Daten , bedeutet dies, dass kein relevanter Inhalt gefunden wurde. Löschen und verbergen Sie daher den Inhalt des Eingabeaufforderungsfelds
else $('#search_auto').html(data).css('display','block'); //Wenn die auf dem Server zurückgegebenen Daten nicht gleich 0 sind, geben Sie den zurückgegebenen Inhalt in das Eingabeaufforderungsfeld ein und zeigen Sie ihn an das Eingabeaufforderungsfeld
});
});

Der obige Client wurde fertiggestellt und kann die Benutzereingaben an den Server senden und auf den Rückgabewert des Servers antworten.

Wie verarbeitet der Server die vom Client gesendeten Daten? Nehmen wir als Beispiel PHP

Code kopieren Der Code lautet wie folgt:

$v=$_POST[Wert];
$re=mysql_query("select * from test where title like '%$v%' order by addtime desc limit 10"); //Fragen Sie 10 verwandte Ergebnisse in der Datenbank basierend auf den vom Client gesendeten Daten ab
if(mysql_num_rows($re) zurück echo '

';
while($ro=mysql_fetch_array($re)) echo '
• '.$ro[title].'
'; Die Titelausgabe der durch die Abfrage erhaltenen relevanten Ergebnisse muss beachtet werden. Da der durch die Ajax-Technologie von jQuery zurückgegebene Text UTF-8-codiert ist, müssen Sie daran denken, PHPs iconv oder andere Funktionen zu verwenden, wenn $ro[title] Chinesisch enthält. Konvertieren Sie es in die UTF-8-Kodierung, andernfalls sehen Sie auf der Seite eine Folge verstümmelter Zeichen
echo '
• Schließen & gt;
'/Geben Sie eine Schaltfläche zum Schließen ein, damit Benutzer sie schließen können, wenn sie die Eingabeaufforderungsebene nicht sehen möchten Die angeklickte Schaltfläche ist $(this). Gehen Sie bis zum dritten übergeordneten Element und lassen Sie es verschwinden
echo '

';
?>

Jetzt kann der Server die von uns gesendeten Daten korrekt ausführen und die entsprechenden Ergebnisse zurückgeben. Geben Sie nun einen Text in das Suchfeld ein, um ihn zu testen. Voraussetzung ist jedoch, dass sich in Ihrer Datenbank etwas zu diesem Text befindet. Andernfalls würde das Eingabeaufforderungsfeld nicht angezeigt, da kein relevanter Eingabeaufforderungsinhalt vorhanden ist, haha.

Aber es gibt immer noch einen kleinen Fehler, das heißt, der Inhalt der Eingabeaufforderungsbox ist nicht schön. Im Vergleich zu der Eingabeaufforderungsbox, die wir in der Baidu-Suche gesehen haben, ist er einfach zu hässlich Verwenden Sie CSS, um die Anzeige anzupassen

Code kopieren Der Code lautet wie folgt:

#search_auto li{background:#FFF; text-align:left;} /*Legen Sie den Li-Tag-Effekt im Eingabeaufforderungsfeld fest*/
#search_auto li.cls{text-align:right;} /*Schließen-Schaltflächeneffekt im Eingabeaufforderungsfeld festlegen*/
#search_auto li a{display:block; padding:5px 6px; Cursor:pointer color:#666;} /*Legen Sie den a-Label-Effekt unter dem li-Label fest*/
#search_auto li a:hover{background:#D8D8D8; text-decoration:none; color:#000;} /*Der Effekt, wenn sich die Maus in das Eingabeaufforderungsfeld bewegt*/

Jetzt ist es wirklich vollständig abgeschlossen. Ob Sie eine Verzögerungsverarbeitung oder andere umfassendere Funktionen einrichten möchten, bleibt Ihren Freunden überlassen. Sie können auch unten auf Ihre Gedanken antworten.

Vollständiger Kundencode:

Code kopieren Der Code lautet wie folgt:

#search{font-size:14px;}
#search .k{padding:2px 1px; width:320px;}
#search_auto{border:1px solid #817FB2; position:absolute; display:none;}
#search_auto li{background:#FFF; text-align:left;}
#search_auto li.cls{text-align:right;}
#search_auto li a{display:block; padding:5px 6px;cursor:pointer; #search_auto li a:hover{background:#D8D8D8; text-decoration:none;color:#000;}