LiveSuche mit Ajax (Suche Tutorial)

  • nochmal Umlaute

    Hallo,
    bin neu hier ;) Hab den Artikel sehr interessant gefunden und habe noch ne Frage.

    Wo genau muss die Header Bezeichnung stehen, in welcher Datei?

    Im Suchergebniss ist alles okay mit den Umlauten nur in der Vorabansicht nicht, also in der AJAX Voransicht.

    Woran kann das noch liegen? Ich denke mal in der DB ist alles Roger, da das nochmal Suchergebniss über livesearch.php?q=wert alles okay ist.

    Danke vorab!

    EDIT: Hat sich erledigt! Ich hatte in der livesearch.php, die XML Sache zerschossen ;)

  • Vorab herzlichen Dank für das tolle Script. In seiner Grundfunktion funktioniert es prima bei mir. Nun zu meinem Problem:

    Ich habe, bevor in meiner html-seite mit onkeypress="liveSearchStart()" die Suche gestartet wird, eine Variable definiert, die kann ich sogar innerhalb des Formulars anzeigen lassen. Nur finde ich keinerlei(!) Möglichkeit, diese variable in irgendeiner Weise mit zu übertragen! Ich brauche den Inhalt der Variablen später in der Ausgabe der livesearch.php in jedem fall! Die Variable sollte als global definiert sein, das wird sie in einer datei namens functions.php. Die functions.php include ich sogar in der livesearch.php! Ich kann im Prinzip auf alle Funktionen zugreifen. Nur auf besagte variable nicht.

    Weiß einer Rat?

  • Wenn man von meinem Posting vom 7. März ausgeht, dann sähe die DB so aus:

    Quellcode

    1. CREATE TABLE TABELLE (
    2. id INT PRIMARY KEY auto_increment
    3. Spalte VARCHAR(255),
    4. link VARCHAR(255),
    5. title VARCHAR(255)
    6. );


    Einträge erstellst du mit

    Quellcode

    1. INSERT INTO TABELLE (Spalte,link,title) VALUES('blaa','url','titel');


    Alle weiterführenden Infos wären hier aber echt fehl am Platz... dazu solltest du dich mit Literatur zu deiner bevorzugten Programmiersprache und deiner bevorzugten Datenbank befassen.

  • d0nUt, vielen dank erstmal. bei mir läuft das ding so wie ich mir das erhofft hatte. bis auf eins: :)

    die key events (key up, key down) funktionieren bei mir nicht. folgende fehlermeldung kommt:

    Quellcode

    1. highlight.setAttribute is not a function
    2. liveSearchKeyPress(keypress charCode=0, keyCode=40)livesearch.js (line 73)
    3. [Break on this error] highlight.setAttribute("id","LSHighlight");


    anscheinend klappt irgendwas mit dem

    Quellcode

    1. highlight = document.getElementById("LSShadow").firstChild.firstChild

    in Zeile 67 (livesearch.js) nicht. hat irgendjemand eine idee? wäre super.....

    das html code sieht so aus:

    Quellcode

    1. <form id="searchform" method="post" action="<?= $_SERVER['PHP_SELF'] ?>?pid=<?= $pid ?>" onsubmit="return liveSearchSubmit()">
    2. <input id="livesearch" type="text" name="q" onkeypress="liveSearchStart()" />
    3. <input type="hidden" name="pid" value="<?= $pid ?>" />
    4. <div id="search">
    5. <div id="LSResult" style="display:none;"><ul id="LSShadow"></ul></div>
    6. </div>
    7. </form>



    Nachtrag:
    Key up funktioniert komischerweise, nur key down nicht. wenn ich zuerst key up mache, dann funktioniert auch key down.... !?

  • danke für deine hilfe, aber das war es nicht. ich hab die lösung gefunden....

    ich arbeite am mac, also haben meine dokumente unix-linebreaks. das war anscheinend die ursache. ich habe in der livesearch.php die umbrüche vor und nach <? ... ?> entfernt.

    funktioniert nicht:

    Quellcode

    1. <ul class="LSRes">
    2. <?
    3. ...
    4. ?>
    5. </ul>


    funktioniert:

    Quellcode

    1. <ul class="LSRes"><?
    2. ...
    3. ?></ul>


    genauso ist es innheralb des form tags:

    funktioniert nicht:

    Quellcode

    1. <div id="LSResult" style="display:none;">
    2. <ul id="LSShadow"></ul>
    3. </div>


    funktioniert:

    Quellcode

    1. <div id="LSResult" style="display:none;"><ul id="LSShadow"></ul></div>


    echt komisch, das hatte ich so noch nie. vielleicht liegt es an der konfiguration meines servers. aber hauptsache es funktioniert jetzt! danke, d0nUt!

  • Hallo,
    ich habe da auch irgendwie ein Problemchen in Internet Explorer 7... Meine Livesuche zeigt Einträge aus einem Postleitzahlenbereich in einer Selectbox und aus der kann man dann wiederum die richtige Ortschaft aussuchen, um dann Infos dazu zu bekommen.
    Der Ablauf dabei ist, dass mein PHP-Script als Livesearch-Result eben die Selectbox und zu allen Einträgen der Selectbox Layer ausspuckt und deren Visibility wird je nach Selectbox-Wahl umgeschalten.
    In FireFox funktioniert das Ganze wunderbar, in Internet Explorer 7 (oh, wie ich ihn hasse) natürlich nicht. Das Problem scheint allerdings in Livesearch begraben zu sein, da auch wenn ich Livesearch nur so wie hier, ohne zusätzlichen Krimskrams, einbaue, nur eine leere, weiße Seite angezeigt wird.

    Siehe http://www.wird-rauchfrei.at/livesearch.html
    Würde mich sehr über Tips/Hilfe freuen :) Danke!


    Code:


    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="_scripts/livesearch.js"></script>
    6. <style type="text/css">
    7. .text{display: none;width:300px;border: solid 1px lightblue;}
    8. .dsR3 /*agl rulekind: base;*/ { width: 209px; height: 71px; }
    9. </style>
    10. <script type="text/javascript">
    11. var currlayerId = "LSResult"; //initially visible Layer
    13. function toglayer(id)
    14. {
    15. if(currlayerId) setDisplay(currlayerId, "none");
    16. if(id)setDisplay(id, "block");
    17. currlayerId = id;
    18. //document.getElementById("LSResult").style.display = "visible";
    19. }
    21. function setDisplay(id,value)
    22. {
    23. if(!(id=="LSResult")){
    24. var elm = document.getElementById(id);
    25. elm.style.display = value;
    26. }
    27. }
    28. </script>
    29. </head>
    30. <body onload="liveSearchInit()">
    33. <form onsubmit="return liveSearchSubmit()" id="FormName" action="http://www.wird-rauchfrei.at/" method="get" name="searchform">
    34. <input onkeypress="liveSearchStart()" id="livesearch" type="text" name="q" />
    35. <p>
    36. <div id="LSResult" style="display:none;"><ul id="LSShadow"></ul></div>
    37. </p>
    38. </form>
    41. </body>
    42. </html>
    Alles anzeigen


    Quellcode

    1. <?php
    2. require('dbconfig.php');
    3. //Initialize Variables
    4. $options = "";
    5. $layers = "";
    6. $i = 1;
    7. $conn = mysql_connect($dbhost, $dbuser, $dbpass);
    8. $database = mysql_select_db($dbname, $conn);
    9. $res = mysql_query("SELECT * FROM gemeinden WHERE plz LIKE '". $_GET['q'] ."%';");
    10. while($row = mysql_fetch_object($res)) {
    11. $netto = intval($row->firmen) * 1;
    12. $mwst = $netto/20;
    13. $brutto = $netto + $mwst;
    14. $options .= "<option value=\"res" . $i . "\" onmousedown=\"javascript:toglayer('res" . $i . "');\">" . $row->name . "</option>\n";
    15. $layers .= "<div id=\"res" . $i . "\" class=\"text\">\n
    16. <p><b>" . $row->name . "</b></p>\n
    17. <p>Kosten (netto): " . $netto . "<br />\n
    18. MWSt.: " . $mwst . "<br />\n
    19. Kosten (brutto): " . $brutto . "</p>\n
    20. </div>";
    21. $i++;
    22. }
    23. echo "<p><select class=\"dsR3\" name=\"selectName\" size=\"5\">" . $options . "</select></p>" . $layers;
    24. ?>
    Alles anzeigen

  • IE 7.0 Problem und KeyDown und KeyUp selbst gelößt!

    Hab das gleiche Prob wie: von: mkuebler hat das jemand schon ne Lößung gefunden nervt schon tierisch!!! Scheiss IE 7.0

    So Mädels hab das Problem mit dem IE 7.0 sowie IE 6.0 gelößt! Der Cache ist das Problem beim IE hier die Lösung beim Request:

    Quellcode

    1. liveSearchReq.open("GET", liveSearchRoot + "/livesearch.php?search_detail_value=" + document.forms.searchform.search_detail_value.value + liveSearchParams2);
    2. liveSearchReq.onreadystatechange= liveSearchProcessReqChange;
    3. liveSearchReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    4. liveSearchReq.setRequestHeader('If-Modified-Since', 'Sat, 1 Jan 2000 00:00:00 GMT');
    5. liveSearchReq.setRequestHeader('Expires', 'Mon, 26 Jul 1970, 00:00:00 GMT');
    6. liveSearchReq.setRequestHeader('Cache-Control', 'no-store, no-cache, must-revalidate');
    7. liveSearchReq.setRequestHeader('Cache-Control', 'post-check=0, pre-check=0');
    8. liveSearchLast = document.forms.searchform.search_detail_value.value;
    9. liveSearchReq.send(null);


    Ein Erfolgserelbnis hab ich zumindst.! Wer eine Script Ergänzung braucht kann sich folgendes einbauen dient zur Cursor runter/rauf event das man damit auch die treffer markieren
    kann und bei Enter dann die URL im li -> also a href ausgeführt wird!






    Ebenfalls Probeleme mit IE7


    Hallo zusammen,

    ich hab enbenfalls Probleme mit dem IE 7, aber es ist leider nicht so trivial wie es pAndOrA gehabt hat!

    Im Firefox funktionierts einwandfrei.
    Mit dem IE bei der ersten Eingabe, danach leider nicht mehr.

    Hatte jemand ebenfalls das Problem und gelöst bekommen?

    Gruß
    Matze



    Die unten aufgeführten Functions halt im orginal ersetzen und wichtig das Formularfeldname anpassen ;) .

    "q" = bei mir "search_detail_values"

    oder die gesamt JS-Script im Anhang einfach runterladen! Ihr müsst dann halt euer FormularFeldName anpassen von "search_detail_value" -> "euerFeldName"

    CODE:

    Quellcode

    1. if (event.keyCode == 40 ) //KEY DOWN { highlight = document.getElementById("LSHighlight"); li_elemente = (document.forms.searchform.getElementsByTagName("li").length)-1; if (!highlight) { highlight = document.getElementById("LSShadow").firstChild.firstChild; highlight_prev = ''; document.forms.searchform.getElementsByTagName("li")[li_elemente].style.backgroundColor = "white"; document.forms.searchform.getElementsByTagName("li")[li_elemente].style.border = "0px"; } else { highlight.removeAttribute("id"); highlight_prev = highlight; highlight = highlight.nextSibling; } if (highlight_prev) { highlight_prev.style.backgroundColor = "white"; highlight_prev.style.border = "0px"; } if (highlight) { highlight.setAttribute("id","LSHighlight"); highlight.style.backgroundColor = "#EEEEEE"; highlight.style.border = "1px solid black"; } if (!isIE) { event.preventDefault(); } } //KEY UP else if (event.keyCode == 38 ) { highlight = document.getElementById("LSHighlight"); if (!highlight) { highlight = document.getElementById("LSResult").firstChild.firstChild.lastChild; highlight_nex = ''; document.forms.searchform.getElementsByTagName("li")[0].style.backgroundColor = "white"; document.forms.searchform.getElementsByTagName("li")[0].style.border = "0px"; } else { highlight.removeAttribute("id"); highlight_nex = highlight; highlight = highlight.previousSibling; } if (highlight_nex) { highlight_nex.style.backgroundColor = "white"; highlight_nex.style.border = "0px"; } if (highlight) { highlight.setAttribute("id","LSHighlight"); highlight.style.backgroundColor = "#EEEEEE"; highlight.style.border = "1px solid black"; } if (!isIE) { event.preventDefault(); } } function liveSearchSubmit() { var highlight = document.getElementById("LSHighlight"); if (highlight && highlight.firstChild) { window.location = highlight.firstChild.getAttribute("href"); return false; } else { return true; } }
    Dateien

    • livesearch.zip

      (2,36 kB, 510 mal heruntergeladen, zuletzt: )

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von TomTheRock ()

  • HI,

    erstmal. Klasse Sache hier ;)

    Nur habe ich das Problem, das bei mir im FF Key UP/Down nicht gehen und im IE werden die Texte als Links angezeigt, was im FF nicht ist (soll auch so sein).

    Habt Ihr da ne Idee?



    Achso, das Hightlight habe ich ein wenig Verändert, damit jedes Vorkommen hervorgehoben wird.


    Hilfe wirde gerne angenommen


    Quellcode

    1. function highlight_searchResult($text, $needle)
    2. {
    3. return preg_replace("/".preg_quote($needle, "/")."/i","".$needle."",$text);
    4. }