LiveSuche mit Ajax (Suche Tutorial)

Beginner

Tuesday, March 7th 2006, 7:04pm

Moin moin!

Ich suche nen Tutorial oder gute Sites wo beschrieben wird wie man ne LiveSuche (z.b wie google Suggest) baut. Ich würde das gerne mit Mysql + PhP und Ajax machen! Kann mir da jemand interesante Seiten nennen ?

Vielen Dank im Vorraus!

Torben Brodt

Administrator

Posts: 8,454

2

Tuesday, March 7th 2006, 8:10pm

habe selbst ein Tutorial dazu in Planung, aber bin noch nicht dazu gekommen es umzusetzen:

Hier findest du ein gutes Tutorial von AjaxPatterns: Live Search

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Afri

Beginner

Posts: 3

3

Tuesday, March 7th 2006, 8:13pm

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

Torben Brodt

Administrator

Posts: 8,454

4

Tuesday, March 7th 2006, 8:31pm

ne, mein tutorial wird noch auf sich warten lassen

hier erfährst du alles weitere.. auch ein weiterer interessanter Link:
Ajax Livesuche

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

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

PHP Quellcode

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

HTML Code

<html>
<head>
<title>Searchtest/title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="livesearch.js"></script>
</head>
<body onload="liveSearchInit()">
 
 
<form onsubmit="return liveSearchSubmit()" id="FormName" action="http://blog.liip.ch//" method="get" name="searchform">
<input onkeypress="liveSearchStart()" id="livesearch" type="text" name="q" />
 
<div id="LSResult" style="display: none;">
	<ul id="LSShadow">
		<li>&#xA0;</li>
	</ul>
</div>
</form>
 
 
</body>
</html>

alle dateien ins hauptverzeichnis deiner domain kopieren

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Afri

Beginner

Posts: 3

5

Tuesday, March 7th 2006, 11:03pm

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

JavaScript Code

<ul class='LSRes'>
<?
include ('dbconf.inc.php');
 
$res = mysql_query("SELECT * FROM e_benutzer WHERE B_Username LIKE '%". $_GET['q'] ."%'; ");
  while($row=mysql_fetch_array($res))
	{
    echo '<li class="LSRow"> » <a href="'.$row['B_Username'].'">'.$row['B_Username'].'</a></li>'; 
	}
?> 
</ul>

Die Html datei habe ich nun genau wie du sie oben noch mal gepostet hattest!!!

Nico

Beginner

Posts: 7

6

Sunday, March 19th 2006, 8:48pm

Quoted from ""Afri""

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.

Tom

Beginner

Posts: 10

7

Monday, March 20th 2006, 5:07am

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.

http://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 :

PHP Quellcode

1
2
3

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

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)

http://userpage.fu-berlin.de/selfhtml/ja…ekte/regexp.htm
!lesen

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

Viel Spass
Gruß
Tom

Torben Brodt

Administrator

Posts: 8,454

8

Monday, March 20th 2006, 2:34pm

Quoted from ""Nico""

Dito, habe leider das gleiche Problem.

@Nico: Hast du dn Nachtrag von Afri gelesen?

folgendes überschreiben:

	JavaScript Code
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

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Nico

Beginner

Posts: 7

9

Monday, March 20th 2006, 3:52pm

Quoted from ""d0nUt""

@Nico: Hast du dn Nachtrag von Afri gelesen?

Nein. Schuldig in allen Punkten

Werde mich die Tage nochmal dransetzen

Cracky

Beginner

Posts: 3

10

Monday, April 3rd 2006, 10:06am

Hab das auch mal getestet

hi schöne beschreibung wie ihr das macht.

Ich habe das ganze auch mal versucht klapt auch sehr gut nur leider macht er bei mir probleme mit den umlauen hat einer eine Idee ?

Cracky

Beginner

Posts: 3

11

Monday, April 3rd 2006, 10:14am

Danke hab schon eine Lösung gefunden

	PHP Quellcode
1 2 3	<?php header("Content-type: text/xml;charset=ISO8859-1"); ?>

Cracky

Beginner

Posts: 3

12

Monday, April 3rd 2006, 10:54am

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

HTML Code

<?
require ("./global.php");
header("Content-type: text/html;charset=ISO8859-1");
?>
<html>
<head>
<title>Searchtest/title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<script type="text/javascript" src="./js/livesearch.js"></script>
</head>
<body onload="liveSearchInit()">
 
<form id="searchform" action="./include/livesearch.php" method="get" onsubmit="return liveSearchSubmit()">
 
<b>Part Number or Type:</b>
<input id="livesearch" name="q" type="text" size="30" onkeypress="liveSearchStart()"><div id="LSResult" style="display: none;"><div id="LSShadow"></div></div>
</form>
 
 
</body>
</html>

livesuche.php

PHP Quellcode

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

MoDzilla

Trainee

Posts: 24

13

Monday, April 3rd 2006, 3:20pm

könnte daran liegen das du in der livesuche-php das echo folgendermaßen ausgibst:

	PHP Quellcode
1	echo "<?xml version='1.0' encoding='utf-8' ?>";

zungerl

Beginner

Posts: 2

14

Friday, June 30th 2006, 6:05pm

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

Torben Brodt

Administrator

Posts: 8,454

15

Friday, June 30th 2006, 9:11pm

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

am schnellsten entledigst du dich der funktion indem du sie umschreibst

JavaScript Code

function liveSearchHide() {
	document.getElementById("LSResult").style.display = "none";
	var highlight = document.getElementById("LSHighlight");
	if (highlight) {
		highlight.removeAttribute("id");
	}
}

zu folgendem:

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

was meinst du mit highlight?

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

zungerl

Beginner

Posts: 2

16

Friday, June 30th 2006, 10:01pm

Hy,

danke für den Tip für das 'clippen'.

Das mit dem Highlight dürfte ich wohl mißverstanden haben (ich hatte da was in der .js gesehen und habe fälschlicherweise angenommen, daß das irgendwas mit dem Highlighten von Suchergebnissen zu tun hat), also überlies das einfach.

Lg und danke nochmal

M

GP

Beginner

Posts: 1

17

Wednesday, July 19th 2006, 5:25am

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

paris

Beginner

Posts: 1

18

Tuesday, August 1st 2006, 12:29pm

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.

Torben Brodt

Administrator

Posts: 8,454

19

Wednesday, August 2nd 2006, 5:30pm

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

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

schreient

Trainee

Posts: 31

20

Friday, September 8th 2006, 2:16pm

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

Coder Forum