jQuery Live-Search/

 


patrick.d
Zaungast

19.11.10
16:11 Uhr
Hallo!
Leider bekomme ich das Plug-in von Andreas Lagerkvist nicht zum laufen...
Ich bin mir nicht sicher, ob ich die Scripte richtig eingebunden habe und wie und wo genau ich die Seite, die durchsucht wird, abgelegt wird ...

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
  2. <html>
  3. <head>
  4. <title>test</title>
  5. <link href="jquery.liveSearch.css" rel="stylesheet" type="text/css" media="screen" />
  6. <script src="jquery.liveSearch.js" type="text/javascript"></script>
  7. <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
  8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  9. <script type="text/javascript" src="/path/to/jquery.plug-in.js"></script>
  10. <script type="text/javascript">
  11. <!--
  12. jQuery('#jquery-live-search-example input[name="q"]').liveSearch({url: Router.urlForModule('SearchResults') + '&q='});
  13. //-->
  14. </script>
  15.  
  16. </head>
  17. <body style="background-image:url(bg.png)">
  18. <form id="jquery-live-search" method="post" action="/search/">
  19. <p>
  20. <label>
  21. Enter search terms
  22. <input type="text" name="q" />
  23. </label> <input type="submit" value="Go" />
  24. </p>
  25. </form>
  26. </body>
  27. </html>
Quelltext in Zwischenablage kopieren

Bei mir erscheint jetzt leider nur das Suchfeld ...
Woran könnte das liegen? Was mache ich falsch?

Ich danke für jegliche Hilfe!

Besten Gruß,
Patrick


PS: Ich bin auch leider kein JS-Pro ... also verzeiht, falls ich zu doof bin ... ;)
Link zu diesem Beitrag in die Zwischenablage kopieren
Mister Ad
Werbung
Schon mal bei Saturn, DaWanda oder notebooksbilliger.de geguckt? Vielleicht wirst du dort fuendig.

 
caZpa
Veteran

19.11.10
17:05 Uhr
die Formular-Id heißt jquery-live-search
im Script wird es mit jquery-live-search-example angesprochen
Link zu diesem Beitrag in die Zwischenablage kopieren
patrick.d
Zaungast

19.11.10
17:21 Uhr
OK, stimmt. Hab ich geändert. Passiert leider nichts.
Wenn ich dann auf „go“ drücke, weil keine live search erscheint, kommt ein 404 - „The requested URL /search/ was not found on this server.“
Link zu diesem Beitrag in die Zwischenablage kopieren
caZpa
Veteran

19.11.10
17:23 Uhr
  1. url: Router.urlForModule('SearchResults') + '&q='
Quelltext in Zwischenablage kopieren
kommt mir komisch vor. ich denke es fehlt das php-Script zur DB-Abfrage


eigentlich ist ein Plugin auch nicht notwending. Geht so viel einfacher

Formular:
  1. <form id="searchinput" >
  2. <input name="keywords" type="text">
  3. <div id="livesearchresult"></div>
  4. </form>
Quelltext in Zwischenablage kopieren

Header-Script:
  1. $("#livesearchresult").hide();
  2. $("#searchinput input[name=keywords]").keyup(function(){
  3. if( $(this).val().length >= 3 ){
  4. $("#livesearchresult").show().html('suche...');
  5. $.ajax({
  6. url: 'livesearch.php',
  7. data:'keywords='+$(this).val(),
  8. type:'GET',
  9. success: function(data) {
  10. $("#livesearchresult").html(data)
  11. }
  12. });
  13. }else{
  14. $("#livesearchresult").show().html('mind. 3 Zeichen eingeben');
  15. }
  16. });
  17. $(document.body).click(function(){
  18. $("#livesearchresult").hide();
  19. });
Quelltext in Zwischenablage kopieren

in der livesearch.php machst du dann mit $_GET['keywords'] die Datenbankabfrage und gibst per echo die Ergebnisse aus, die werden dann in das div livesearchresult geschrieben.
Link zu diesem Beitrag in die Zwischenablage kopieren
patrick.d
Zaungast

20.11.10
15:03 Uhr
das sieht ja schon mal übersichtlicher und einfacher aus!
ich habe jetzt die livesearch.php datei angelegt:

  1. <div id="livesearch"><?php echo $_GET['keyword']; ?></div>
Quelltext in Zwischenablage kopieren

noch funktionierts nicht so richtig ...
bin ja nicht so der kenner ... aber wo und wie schreibe ich nun die keywords rein?

danke im voraus für die hilfe!
Link zu diesem Beitrag in die Zwischenablage kopieren
caZpa
Veteran

20.11.10
16:12 Uhr
Editiert: 20.11.10, 19:50 Uhr
index.php:
  1. <head>
  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
  3. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
  4. <script type="text/javascript">
  5. $(function() {
  6. $("#livesearchresult").hide();
  7. $("#searchinput input[name=keywords]").keyup(function(){
  8. if( $(this).val().length >= 3 ){
  9. $("#livesearchresult").show().html('suche...');
  10. $.ajax({
  11. url: 'livesearch.php',
  12. data:'keywords='+$(this).val(),
  13. type:'GET',
  14. success: function(data) {
  15. $("#livesearchresult").html(data)
  16. }
  17. });
  18. }else{
  19. $("#livesearchresult").show().html('mind. 3 Zeichen eingeben');
  20. }
  21. });
  22.  
  23. $(document).click(function(){
  24. $("#livesearchresult").hide();
  25. });
  26. });
  27. </script>
  28. </head>
  29. <body>
  30. <form id="searchinput" >
  31. <input name="keywords" type="text">
  32. <div id="livesearchresult"></div>
  33. </form>
Quelltext in Zwischenablage kopieren

livesearch.php:
  1. <?php
  2.  
  3. echo 'eingegebenes Keyword: '.$_GET['keywords'].'< br />';
  4.  
  5. /*
  6. * Hier die Datenbankabfrage, z.B.:
  7. */
  8. $con = mysql_connect('localhost', 'user', 'pass');
  9. mysql_select_db('datenbankname', $con);
  10. $result = mysql_query("SELECT * FROM `tabelle` WHERE `field`='".$_GET['keywords']."'");
  11. while ($row = mysql_fetch_array($result)) {
  12. $output.='<a href"'.$row['url'].'">'.$row['title'].'</a>< br />';
  13. }
  14. echo $output;
  15.  
  16. ?>
Quelltext in Zwischenablage kopieren
Link zu diesem Beitrag in die Zwischenablage kopieren
webflo
Dauergast

21.11.10
10:31 Uhr
Würde sagen es liegt am SQL Query. Sollte bestimmt ne LIKE Suche sein.
Link zu diesem Beitrag in die Zwischenablage kopieren
caZpa
Veteran

21.11.10
11:35 Uhr
ist ja nur ein beispiel, wie gesucht werden soll muss er schon selber wissen
Link zu diesem Beitrag in die Zwischenablage kopieren
Dominic
Moderator

21.11.10
13:32 Uhr
  1. echo 'eingegebenes Keyword: '.$_GET['keywords'].'< br />';
  2. ...
  3. $result = mysql_query("SELECT * FROM `tabelle` WHERE `field`='".$_GET['keywords']."'");
Quelltext in Zwischenablage kopieren

bitte dieses beispiele so nicht verwenden, da es xss und sql-injection beinhaltet. werber
Link zu diesem Beitrag in die Zwischenablage kopieren
caZpa
Veteran

21.11.10
15:15 Uhr
da hast du natürlich recht
Keyword Ausgabe mit htmlspecialchars()
im query mit mysql_real_escape_string()
Link zu diesem Beitrag in die Zwischenablage kopieren
patrick.d
Zaungast

21.11.10
16:59 Uhr
alles klar! danke euch. klappt.
und danke für den sicherheitshinweis.
Link zu diesem Beitrag in die Zwischenablage kopieren
 
#