PHP Datenbank in Echtzeit durchsuchen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

lokoroko

Mitglied
9 Mai 2017
186
0
16
29
Hallo,

also erstmal zu dem was ich überhaupt vorhabe. Wie in der Überschrift schon deutlich wird, habe ich vor eine Suchfunktion auf meiner Website einzubauen. Dabei soll bereits während der Eingabe in das Suchfeld erste Treffer angezeigt werden.

So nun habe ich im Netz schon mal ein wenig geschaut und habe zu dem was ich suche auch schon ein Script gefunden das im wesentlichen aus drei Dateien besteht:

index.php
search.php
Java_Suche.js

index.php
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   
    <title>Suche mit jQuery-Autocomplete</title>
   
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="Java_Suche.js"></script>
   
    <link rel="stylesheet" type="text/css" href="Suche_design.css" />
</head>
<body>
    <form action="search.php">
        <input type="text" id="search" name="search" /> <input type="submit" name="submit" value="Suchen" />
    </form>
    <div id="results"></div>
</body>
</html>

search.php
Code:
<?php
    mysql_connect("localhost","root","hund456") or die ("Keine Verbindung moeglich");
    mysql_select_db("Datenbank_NEU") or die ("Die Datenbank existiert nicht");
    mysql_query("SET NAMES 'utf8'");
   
    $result = mysql_query("SELECT * FROM adressen WHERE vorname LIKE '%".$_GET['search']."%' LIMIT 5");
    while($row = mysql_fetch_object($result))
    {
        echo '';
        echo preg_replace('/(' . $_GET['search'] . ')/Usi', '<span class="result">\\1</span>', $row->text);
        echo '';
    }
?>

Java_Suche.js
Code:
$(document).ready(function()
{
    $('#search').keyup(function()
    {
        if($(this).val().length >= 3)
        {
            $.get("search.php", {search: $(this).val()}, function(data)
            {
                $("#results").html(data);
            });
        }
    });
});


Soo aus rätselhaften Gründen aber will das ganze nicht so funktionieren wie ich mir das vorstelle. Die Echtzeit-Überprüfung der Eingabe funktioniert nicht und auch bei Klick auf den Button werden keine Ergebnisse angezeigt. Was übersehe ich ? Wie gesagt ich habe das Script aus dem Netz und einfach nur ein wenig angepasst.

Wer nochmal nachlesen möchte findet das Script unter folgendem Link:
https://advitum.de/2010/09/suchergebnisse-schon-beim-eintippen-mit-jquery/

Eventuell habe ich ja doch etwas falsch eingegeben :)
 
Werbung:
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Ich empfehle die gängigen Diagnosemethoden:
Prüfen, ob der Callback beim Ajax aufgerufen wird. Wenn ja: Ausgabe des PHP-Skriptes überprüfen.
Wenn nein: Da GET-Parameter kannst Du das PHP-Skript sehr leicht für sich testen, indem Du den Parameter an die URL anhängst:
search.php?search=abc

Etwas triviales, aber vielleicht hast Du es nicht bemerkt:
Code:
if($(this).val().length >= 3)
Der Suchvorgang startet erst, wenn mindestens 3 Zeichen eingegeben wurden.
 
  • Like
Reaktionen: lokoroko

m.scatello

Senior HTML'ler
15 Februar 2017
1.533
183
63
Zur Info: die mysql_*-Funktionen sind veraltet und sollten nicht mehr benutzt werden. In PHP 7 sind diese Funktionen komplett verschwunden. Stelle um auf mysqli_* oder PDO.

Und never ever "Select *" schreiben, zähle die Spalten auf die du brauchst.
 
  • Like
Reaktionen: lokoroko

lokoroko

Mitglied
9 Mai 2017
186
0
16
29
Also ich habe mir eure Ratschläge angeschaut und versucht diese umzusetzen und siehe da, es scheint sich was zu tun. Ich habe jetzt nur was an der search.php geändert, schaut jetzt so aus:

Code:
<?php
$benutzername = $_GET['search'];

$pdo = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'hund456');
$sql = "SELECT benutzername FROM adressen WHERE benutzername LIKE '$benutzername' LIMIT 5";
foreach ($pdo->query($sql) as $row)
    {
        echo $row['benutzername'];
        echo preg_replace('/(' . $_GET['search'] . ')/Usi', '<span class="result">\\1</span>', $row->text); //kann eventuell raus
        echo '';
    }
?>

Dabei gibt es jedoch ein paar kleinere Probleme...
Und zwar hapert es jetzt ein wenig mit der Echtzeit-Überprüfung. Normalerweise soll ja sobald drei Zeichen eingegeben wurden, die Suche in der Datenbank beginnen. Leider funktioniert das ganze erst dann wenn ich schon den gesamten Benutzernamen eingetippt habe und dann wird auch immer nur ein Ergebnis angezeigt

Desweiteren habe ich auch ein Problem mit verschiedenen Benutzernamen...
Aktuell existieren drei Benutzernamen in der Datenbank (dieProbe, philpru92, philadelphia)

Bei den Benutzernamen dieProbe und philpru92, wird sobald der Benutzername vollständig eingegeben wurde auch der Benutzername angezeigt.
Bei philadelphia hingegen tut sich gar nichts....

Woran könnte das liegen das die Echtzeit-Überprüfung und das Problem mit dem Nutzernamen auftritt ? Eventuell weil ich jetzt eine foreach-Schleife nutze ?
 
Werbung:

lokoroko

Mitglied
9 Mai 2017
186
0
16
29
Es funktioniert alles nach wie vor doch ich habe da noch eine Sache gefunden die ich gerne ändern würde.

Sagen wir ich tippe etwas in das Suchfeld ein, entscheide mich dann aber wieder um und lösche die Eingabe. Wie kriege ich es dann hin das dann auch die Suchvorschläge verschwinden ?

Aktuell ist es nämlich so das zwar je nach Eingabe aussortiert wird aber sobald nichts mehr in dem Input-Feld steht werden alle Benutzernamen angezeigt die bei der Eingabe in Frage gekommen wären ;/

Ich hoffe ihr versteht was ich meine...
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Du überwachst ja schon die Tastatureingaben. Dort könntest Du die Ergebnisse löschen, wenn weniger als drei Zeichen eingegeben wurden:
Code:
$(document).ready(function()
{
    $('#search').keyup(function()
    {
        if($(this).val().length >= 3)
        {
            $.get("search.php", {search: $(this).val()}, function(data)
            {
                $("#results").html(data);
            });
        } else {
             $("#results").html("");
        }
    });
});
 
  • Like
Reaktionen: lokoroko

auxilius

Neues Mitglied
2 Mai 2021
2
0
1
35
Hi,

ich möchte ungern einen neuen Thread zu ein und dem selben Thema eröffnen, deshalb bin ich mal so frei, und grabe diesen hier wieder aus.

Und zwar folgendes: Ich habe mir dasselbe Script wie lokoroko zu nutze gemacht. Ich möchte daran jedoch noch zwei Optimierungen vornehmen:

1.) Sollen unter dem input-Suchfeld zwei Radio-Buttons (Autor / Titel) zur Auswahl zur Verfügung stehen, welche den SQL-Befehl entsprechend beeinflussen (Suche nach Autor oder nach Titel). Die Verarbeitung in PHP ist für mich relativ simpel - wie aber schaffe ich es, zusätzlich den Wert des ausgewählten Radiobuttons mit zu übertragen?

2.) Die "Live Suche" gibt ja unter dem Textfeld die aktuellen Übereinstimmungen aus. In wie fern kann ich diese "anklickbar" machen, damit diese in das Inputfeld übernommen werden?

Wäre über etwas Hilfe sehr dankbar :-)

Beste Grüße
Auxilius
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Zu 1): Angenommen, die Radiobuttons habe beide das name-Attribut "column", dann kannst Du den gecheckten folgender Maßen an das $.get übergeben:
Code:
$(document).ready(function()
{
    $('#search').keyup(function()
    {
        if($(this).val().length >= 3)
        {
            $.get("search.php", {
                search: $(this).val()
                column: $('input[name="column"]:checked').val()
            }, function(data)
            {
                $("#results").html(data);
            });
        } else {
             $("#results").html("");
        }
    });
});
Dann findest Du das value-Attribut des gecheckten Radiobuttons unter $_GET['column'].
(ungetestet)
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Zu 2): Eine Klasse haben die Ergebnisse ja schon. Dann brauchst Du nur noch einen Eventlistener zu registrieren und den Inhalt des span in das Eingabefeld übertragen:
Code:
$(document).on('click', '.result', function() {
    $('#search').val($(this).text());
});
(ebenfalls ungetestet)
 
Werbung:

auxilius

Neues Mitglied
2 Mai 2021
2
0
1
35
Zu 1): Angenommen, die Radiobuttons habe beide das name-Attribut "column", dann kannst Du den gecheckten folgender Maßen an das $.get übergeben:
Code:
$(document).ready(function()
{
    $('#search').keyup(function()
    {
        if($(this).val().length >= 3)
        {
            $.get("search.php", {
                search: $(this).val()
                column: $('input[name="column"]:checked').val()
            }, function(data)
            {
                $("#results").html(data);
            });
        } else {
             $("#results").html("");
        }
    });
});
Dann findest Du das value-Attribut des gecheckten Radiobuttons unter $_GET['column'].
(ungetestet)

Vielen Dank für deine schnelle Rückmeldung. Leider liefert er mir gar keine "Live-Suchergebnisse" mehr, wenn ich die column-Zeile hinzufüge :-/

Mein Formular sieht so aus:

Code:
    <form action="search.php">
        <input type="text" id="search" name="search" autocomplete="off"> <input type="submit" name="submit" value="Suchen"><br>
         <input type="radio" id="column" name="column" value="autor" checked>Autor
         <input type="radio" id="column" name="column" value="titel">Titel
    </form>

Habe ich einen Denkfehler?

Beste Grüße
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Jetzt immer noch nicht getestet aber auf Syntaxfehler geprüft: Da fehlt ein Komma zwischen den beiden Parametern, so ist es richtig:
Code:
        $(document).ready(function () {
            $('#search').keyup(function () {
                if ($(this).val().length >= 3) {
                    $.get("search.php", {
                        search: $(this).val(), // <--- Komma fehlte hier
                        column: $('input[name="column"]:checked').val()
                    }, function (data) {
                        $("#results").html(data);
                    });
                } else {
                    $("#results").html("");
                }
            });
        });
Mache dich mit den Entwicklerwerkzeugen deines Browsers und darin, der Konsole vertraut, die zeigt solche Fehler an.
 
Werbung: