|
ajax powered zoek machine, toont ook suggesties
Auteur: vinTage - 22 januari 2009 - 23:46 - Gekeurd door: marten - Hits: 15230 - Aantal punten: (0 stemmen)
Eigenlijk gaat het niet zozeer om het Ajax gedeelte, maar sinds dat Ajax hot blijkt te zijn, is dit wel een gunstige titel denk ik 
Het scriptje doorzoekt dus gewoon je database naar woorden die je intikt en toont de mogelijke resultaten op voorhand, thats all.
Er zit een kleine config bij, die je wat kan aanpassen, maar de comments in het script van zoek.php zullen eea wel verduidelijken.
Note: zowel in zoek.php als in de index je database gegevens aanpassen.
|
| Code: |
index.php
<!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>zoek ding</title>
<script type="text/javascript">
function createRequestObject()
{
var req;
if(window.XMLHttpRequest)
{
req = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
req = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert('hmz....muffe browser...');
}
return req;
}
var http = createRequestObject();
function sendRequest(zoekwoord)
{
http.open('get', 'zoek.php?zoekwoord='+zoekwoord);
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse()
{
if(http.readyState == 4 && http.status == 200)
{
if(http.responseText)
{
document.getElementById("resultaat").innerHTML = http.responseText;
}
}
}
</script>
</head>
<body>
<?php
mysql_connect ("localhost","root","") or die(mysql_error());
mysql_select_db("zoektest")or die (mysql_error());
?>
<form action="<?php echo htmlentities($_SERVER['REQUEST_URI']);?>" method="post">
<div id="zoekding">
zoek: <input type="text" onKeyUp="sendRequest(this.value)" />
</div>
</form>
<div id="resultaat"></div>
<hr />
<div id="content">
<?php if(isset($_GET['id']))
{
$qry = mysql_query("SELECT count(id) as aantal, berichten FROM zoeken WHERE id = '".mysql_real_escape_string($_GET['id'])."' LIMIT 1");
while($res = mysql_fetch_array($qry))
echo ($res['aantal'] == 0)? 'id bestaat niet' : nl2br(preg_replace("~".$_GET['highlight']."~i", "<b style='color:red;'>".$_GET['highlight']."</b>", $res['berichten']));
}
?>
</div>
</body>
</html>
<!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>zoek ding</title> <script type="text/javascript"> function createRequestObject() { var req; if(window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if(window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert('hmz....muffe browser...'); } return req; } var http = createRequestObject(); function sendRequest(zoekwoord) { http.open('get', 'zoek.php?zoekwoord='+zoekwoord); http.onreadystatechange = handleResponse; http.send(null); } function handleResponse() { if(http.readyState == 4 && http.status == 200) { if(http.responseText) { document.getElementById("resultaat").innerHTML = http.responseText; } } } </script> </head> <body> <?php ?> <form action=" <?php echo htmlentities($_SERVER['REQUEST_URI']);? >" method="post"> <div id="zoekding"> zoek: <input type="text" onKeyUp="sendRequest(this.value)" /> </div> </form> <div id="resultaat"></div> <hr /> <div id="content"> <?php if(isset($_GET['id'])) { echo ($res['aantal'] == 0)? 'id bestaat niet' : nl2br(preg_replace("~".$_GET['highlight']."~i", "<b style='color:red;'>".$_GET['highlight']."</b>", $res['berichten'])); } ?> </div> </body> </html>
zoek.php
<?php
//maximaal aantal zoek resultaten
$max_query = 10;
//de maximale lengte van de resultaten (aantal chars)
$max_resultaat_lengte = 30;
//kies tussen substring of suggestie
//false geeft gewoon een string van "max_resultaat_lengte"
//true geeft een suggestie van een WOORD.. de "eindes" voor dit WOORD kunnen we aangeven in het array eind_chars
$substr_vs_suggestie = false;
//minimaal aantal characters wat ingegeven moet worden in het zoekveld alvorens er resultaten gegeven worden (hoe hoger het nummer, hoe deftiger de éérste resultaten)
$min_input = 3;
mysql_connect ("localhost","root","") or die(mysql_error());
mysql_select_db("zoektest")or die (mysql_error());
//array met characters die we gebruiken om het einde van een woord aan te duiden voor het "suggereren" (evt zelf uitbreiden/verwijderen)
//alleen nodig met de optie "substr_vs_suggestie = false"
$eind_chars = array(
" ", //spatie
".", //punt
",", //komma
"/", //fw slash
"\\", //backwards slash
"\"", //double quote
"'", //single quote
"<",
">",
"?",
"=",
"&");
if(!empty($_GET['zoekwoord']) && strlen($_GET['zoekwoord']) >= $min_input)
{
$zoekwoord = mysql_real_escape_string($_GET['zoekwoord']);
$qry = mysql_query("SELECT DISTINCT(berichten),
SUBSTR(berichten, LOCATE('".$zoekwoord."', berichten ), ".$max_resultaat_lengte." ) as tekst_gedeelte,
id
FROM
zoeken
WHERE
berichten
LIKE '%".$zoekwoord."%'
LIMIT ".$max_query) or die(mysql_error());
//$eindwoord = $max_resultaat_lengte;
while($res = mysql_fetch_array($qry))
{
$gevonden = stripslashes($res['tekst_gedeelte']);
$index = array();
if(!$substr_vs_suggestie)
{
//mogelijke "einde(s)" opduikelen
for($i = 0; $i < count($eind_chars); $i++)
{
$pos = strpos($gevonden, $eind_chars[$i]) ;
if($pos)
{
array_push($index, $pos);
}
}
//eerste "einde" vooraan zetten
sort($index);
}
//lengte van onze "suggestie" string bepalen
$max_resultaat_lengte = (count($index) > 0) ? $index[0] : $max_resultaat_lengte;
$link = htmlentities(substr($gevonden, 0, $max_resultaat_lengte));
?>
<a href="?id=<?php echo $res['id'];?>&highlight=<?php echo $link;?>"><?php echo $link;?></a><br />
<?php
}
}
else
{
echo '';
}
?>
<?php //maximaal aantal zoek resultaten $max_query = 10; //de maximale lengte van de resultaten (aantal chars) $max_resultaat_lengte = 30; //kies tussen substring of suggestie //false geeft gewoon een string van "max_resultaat_lengte" //true geeft een suggestie van een WOORD.. de "eindes" voor dit WOORD kunnen we aangeven in het array eind_chars $substr_vs_suggestie = false; //minimaal aantal characters wat ingegeven moet worden in het zoekveld alvorens er resultaten gegeven worden (hoe hoger het nummer, hoe deftiger de éérste resultaten) $min_input = 3; //array met characters die we gebruiken om het einde van een woord aan te duiden voor het "suggereren" (evt zelf uitbreiden/verwijderen) //alleen nodig met de optie "substr_vs_suggestie = false" " ", //spatie ".", //punt ",", //komma "/", //fw slash "\\", //backwards slash "\"", //double quote "'", //single quote "<", ">", "?", "=", "&"); if(!empty($_GET['zoekwoord']) && strlen($_GET['zoekwoord']) >= $min_input) { SUBSTR(berichten, LOCATE('".$zoekwoord."', berichten ), ".$max_resultaat_lengte." ) as tekst_gedeelte, id FROM zoeken WHERE berichten LIKE '%".$zoekwoord."%' //$eindwoord = $max_resultaat_lengte; { if(!$substr_vs_suggestie) { //mogelijke "einde(s)" opduikelen for($i = 0; $i < count($eind_chars); $i++) { $pos = strpos($gevonden, $eind_chars[$i]) ; if($pos) { } } //eerste "einde" vooraan zetten } //lengte van onze "suggestie" string bepalen $max_resultaat_lengte = (count($index) > 0) ? $index[0] : $max_resultaat_lengte; ?> <a href="?id= <?php echo $res['id'];? >&highlight= <?php echo $link;? >"> <?php echo $link;? ></a><br /> <?php } } else { } ?>
De database
--
-- Database: `zoektest`
--
CREATE TABLE `zoeken` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`berichten` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM;
INSERT INTO `zoeken` (`id`, `berichten`) VALUES
(1, 'Dit is een test'),
(2, 'vinTage is lief !'),
(3, 'moeilijke woorden lukken ook'),
(4, 'caps insensitive / hoofdletter ongevoelig'),
(5, 'mijn keyboard is een qwerty geval'),
(6, 'boeieuh, de basis is er :p');
-- -- Database: `zoektest` -- CREATE TABLE `zoeken` ( `id` int(11) NOT NULL AUTO_INCREMENT, `berichten` text NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM; INSERT INTO `zoeken` (`id`, `berichten`) VALUES (1, 'Dit is een test'), (2, 'vinTage is lief !'), (3, 'moeilijke woorden lukken ook'), (4, 'caps insensitive / hoofdletter ongevoelig'), (5, 'mijn keyboard is een qwerty geval'), (6, 'boeieuh, de basis is er :p');
 Download code (.txt)
|
|
 Stemmen |
| Niet ingelogd. |
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
