LiveSuche mit Ajax (Suche Tutorial)

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Wow das wäre super denn du das mal onstellen könntest oder mir wenn du schon mal so was für deine eigene HP geschrieben hast zur Verfügung stellen könntest!!

    Ich muss ja leider sagen das ich noch nicht so in dem Thema Ajax drinne bin! Eher PHP und Mysql! Nur das Ajax fehlt leider noch!

    Auf der Seite die du geschrieben hast war ich auch schon! :) danke aber trotzdem dafür!

    Grüße
    {-> Du bist eine 1 oder eine 0 / Lebendig oder Tot <-}

  • ne, mein tutorial wird noch auf sich warten lassen

    hier erfährst du alles weitere.. auch ein weiterer interessanter Link:
    [coderwiki]http://www.coder-wiki.de/HowTos/Ajax-Livesuche[/coderwiki]

    einfach runterladen: blog.liip.ch/livesearch.js

    und die livesearch.php erstellen und auf deine datenbank anpassen
    grob muss sie so aussehen:

    Quellcode

    1. <ul class='LSRes'>
    2. <?
    3. $res = mysql_query("SELECT * FROM TABELLE WHERE Spalte LIKE '%". $_GET['q'] ."%'; ");
    4. while($row = mysql_fetch_object($res)) {
    5. echo '<li class="LSRow"> » <a href="'.$row->link.'">'.$row->title.'</a></li>';
    6. }
    7. ?>
    8. </ul>



    Quellcode

    1. <html>
    2. <head>
    3. <title>Searchtest/title>
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    5. <script type="text/javascript" src="livesearch.js"></script>
    6. </head>
    7. <body onload="liveSearchInit()">
    10. <form onsubmit="return liveSearchSubmit()" id="FormName" action="http://blog.liip.ch//" method="get" name="searchform">
    11. <input onkeypress="liveSearchStart()" id="livesearch" type="text" name="q" />
    13. <div id="LSResult" style="display: none;">
    14. <ul id="LSShadow">
    15. <li>&#xA0;</li>
    16. </ul>
    17. </div>
    18. </form>
    21. </body>
    22. </html>
    Alles anzeigen

    alle dateien ins hauptverzeichnis deiner domain kopieren

  • Nachtrag Ich habe es nun doch geschafft :) aber danke für deine Mühen :) Ich habe einfach mal die
    <script type="text/javascript">var liveSearchRoot="/Ajax/Search/"</script>

    überschrieben :) nun gehts super !!!!

    Ok :) alles so gemacht wie du es gesagt hattest! den head hatte ich dann auch selber schon gefunden! Aber daran lag es auch nicht das es nicht geht!

    Also es ist ein wenig komisch! Gebe ich was ein in dem Input dann kommt Objekt nicht gefunden! Drücke ich aber nach der Eingabe die Entertaste so erscheinen die Richtigen Ergebnisse allerdings dann auf einer neuen seite!
    Was muss ich ändern damit es auf der gleichen Seite steht?

    Hier mal die livesearch.php

    Quellcode

    1. <ul class='LSRes'>
    2. <?
    3. include ('dbconf.inc.php');
    5. $res = mysql_query("SELECT * FROM e_benutzer WHERE B_Username LIKE '%". $_GET['q'] ."%'; ");
    6. while($row=mysql_fetch_array($res))
    7. {
    8. echo '<li class="LSRow"> » <a href="'.$row['B_Username'].'">'.$row['B_Username'].'</a></li>';
    9. }
    10. ?>
    11. </ul>
    Alles anzeigen


    Die Html datei habe ich nun genau wie du sie oben noch mal gepostet hattest!!!
    {-&gt; Du bist eine 1 oder eine 0 / Lebendig oder Tot &lt;-}

  • "Afri" schrieb:


    Also es ist ein wenig komisch! Gebe ich was ein in dem Input dann kommt Objekt nicht gefunden! Drücke ich aber nach der Eingabe die Entertaste so erscheinen die Richtigen Ergebnisse allerdings dann auf einer neuen seite!
    Was muss ich ändern damit es auf der gleichen Seite steht?


    Dito, habe leider das gleiche Problem.

  • Also ich würd für sql Suchfunktionen nicht mit LIKE arbeiten.
    Stattdessen mit MATCH.

    weil:schneller;
    und man kann diverse Such-Einschränkungen vornehmen, wie z.B. das weglassen von Worten wie (der, die, das, und, weil, etc.)
    das hilft der performance und ist die elegantere Variante.

    dev.mysql.com/doc/refman/4.0/de/fulltext-search.html
    !wichtig

    Nette Spässe sind natürlich solche Geschichten wie searchString-mark oder highlight, so wie das bei der google (in.cache) Suche ist.

    Um das zu reissen müsst ihr imgrunde nur die basics in regulären Ausdrücken kennen.

    unter php benutzt man da preg_replace
    (ich liebe diesen command! :) )

    ich mach das momentan mit dieser funktion :

    Quellcode

    1. function highlight_searchResult($text, $needle) {
    2. return preg_replace( "/(^|\s|,!|;|\>)(".preg_quote($needle, "/").")(\s|,|!|&|$|\<)/i", "\\1<span class='search_highlight'>\\2</span>\\3", $text);
    3. }

    Dieser regExp replaced nur zwischen Tags, was gut ist, da man sicher nicht HTML Tags ersetzt haben will die zufällig den searchString matchen.

    unter Java nutzt man da .replace(regExp, replacement)

    userpage.fu-berlin.de/selfhtml/javascript/objekte/regexp.htm
    !lesen

    Das ganze ruft ihr dann instant mit ajax auf und fertig ist das mondgesicht.

    Viel Spass
    Gruß
    Tom

  • "Nico" schrieb:

    Dito, habe leider das gleiche Problem.


    @Nico: Hast du dn Nachtrag von Afri gelesen?

    folgendes überschreiben:

    Quellcode

    1. <script type="text/javascript">var liveSearchRoot="/Ajax/Search/"</script>


    @Tom, danke für die ergänzenden Highlighting Tipps - so wie ich Afri verstanden habe, gehts ihm erstmal nur darum, dass die Ergebnisse als DropDown live geladen werden..
    aber die Volltextsuche mit MATCH ist natürlich wesentlich schneller

  • So jetzt ist zwar das Suchergebniss OK aber bei der Such anfrage geht es leider immer noch nicht mit dem Umlauten hat jemand eine Idee ?

    suche.php

    Quellcode

    1. <?
    2. require ("./global.php");
    3. header("Content-type: text/html;charset=ISO8859-1");
    4. ?>
    5. <html>
    6. <head>
    7. <title>Searchtest/title>
    8. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    9. <script type="text/javascript" src="./js/livesearch.js"></script>
    10. </head>
    11. <body onload="liveSearchInit()">
    13. <form id="searchform" action="./include/livesearch.php" method="get" onsubmit="return liveSearchSubmit()">
    15. <b>Part Number or Type:</b>
    16. <input id="livesearch" name="q" type="text" size="30" onkeypress="liveSearchStart()"><div id="LSResult" style="display: none;"><div id="LSShadow"></div></div>
    17. </form>
    20. </body>
    21. </html>
    Alles anzeigen


    livesuche.php

    Quellcode

    1. <?
    2. header("Content-type: text/xml;charset=ISO8859-1");
    4. include("./config.inc");
    5. require("./class_db.php");
    6. echo "<?xml version='1.0' encoding='utf-8' ?>";
    7. $db = new db($db_server,$db_user,$db_passwort,$db_name,$phpversion);
    8. ?>
    10. <ul class='LSRes'>
    11. <?
    14. $ergebnis = mysql_query ("SELECT * FROM user WHERE nachname LIKE '$q%' OR vorname LIKE '$q%' ORDER BY nachname LIMIT 15") or die ("SQL-Fehler");
    15. //$ergebnis = mysql_query ("SELECT * FROM user WHERE MATCH (nachname,vorname) AGAINST ('$q')");
    16. while ($datensatz = mysql_fetch_array($ergebnis))
    17. {
    18. echo "<li class='LSRow'>$datensatz[nachname] $datensatz[vorname]</li>";
    19. }
    20. ?>
    Alles anzeigen

  • Hallo zusammen,

    dieses Tutorial hat mir sehr geholfen auch eine live-Suche zu erstellen.

    Folgende Fragen habe ich aber trotzdem noch:

    - Wie kann ich es bewerkstelligen, daß das Suchergebnis auch 'festgepint' wird, und nicht verschwindet, wenn ich entweder außerhalb des Such-div irgendwo ins Fenster klicke oder das Fenster den focus verliert

    - das mit dem Highlight dürfte bei mir nicht wirklich funktionieren. Worauf muß ich da achten, daß das funktioniert?

    Ansonsten, prima Anleitung. Danke an den Ersteller

    lg, M

  • das verstecken ist ja als feature gedacht und soll niemanden stören..

    am schnellsten entledigst du dich der funktion indem du sie umschreibst

    Quellcode

    1. function liveSearchHide() {
    2. document.getElementById("LSResult").style.display = "none";
    3. var highlight = document.getElementById("LSHighlight");
    4. if (highlight) {
    5. highlight.removeAttribute("id");
    6. }
    7. }


    zu folgendem:

    Quellcode

    1. function liveSearchHide() {
    2. return false;
    3. }


    was meinst du mit highlight?

  • Bei mir kommt der selber Fehler wie bei Afri.
    Nach einem Input kommt "Objekt nicht gefunden"


    Die von Afri gepostete Loesung funktioniert bei mir nicht, da die Zeile "<script type="text/javascript">var liveSearchRoot="/Ajax/Search/"</script>" nirgends existiert.

    In der JS Datei wird allerdings eine Datei namens preview.php aufgerufen. Ich weiss aber nicht wie der Inhalt dieser Datei aussehen muss und sie einfach durch eine eigene Datei ersetzen funktioniert nicht.

    Wuerde mich freuen wenn mir jemand helfen kann.

    MfG
    GP

  • finde die live suche echt cool funktioniert auch wunderbar bei mir jetzt würde ich sie nur gerne so einsetzen das bei mir am anfang wenn in der suchbox nichts eingegeben ist eine komplette liste aller datensätze erscheint und diese dann bei einem eintrag in die suchbox durch das suchergebnis ersetzt wird.

    kann mir einer sagen wie ich das am einfachsten umsetzen kann ? also das quasi am anfang schon ein resultfeld mit allen werten ausgegeben wird das dann bei einer sucheingabe ersetzt wird.

  • das sollte hoffentlich relativ leicht zu beheben sein

    zuallererst rufst du das script beim laden des dokuments aus
    <body onload="liveSearchStart()">

    dann musst du die hide Funktion umschreiben
    entweder ganz entfernen (wie hier beschrieben) oder so umschreiben, dass sie ausgeblendet wird, wenn der user zumindest das eingabeformular betätigt hat

  • kann mir vieleicht einer per pm dabei helfen das auch ich eine ls hinbekomme?
    hab trotz der vielen antworten hier nichts verstanden.
    habe übrigens auch kein wissen über php, daran wirds wohl liegen.
    aber wenn jemand so nett ist und mir dabei helfen würde,
    wäre ich sehr dankbar. zur not auch gegen bezahlung etwas programmieren lassen, wer will.

    vielen dank schonmal im voraus