autoaanvullen met db-gegevens

[Johantrax]

Even kort tonen wat ik wil proberen maken: Ga naar de HelpMij Zoekpagina en begin iets in te typen bij "zoeken op gebruikersnaam". Na 3 letters komt een keuzelijst met matches op geregistreerde namen.

Een korte blik in de broncode leert al snel dat dit systeem met ajax is opgezet, echter heb ik hier totaal geen ervaring mee.

Hoe ik op dit moment denk een gelijkaardig systeem te maken:
met javascript op het onkeypress-event van mijn textfield reageren, daarin kijken naar de inhoud van dat field, en dan met php (=external js) de query uitvoeren, die een js-array met matches weergeeft.

Lijkt dit jullie haalbaar? Andere mogelijke benaderingen (ik ben enkel goed vertrouwd met XHTML/DHTML/CSS/JS/PHP op gebied van webtalen)?

--Johan

 

[Tha Devil]

Ik heb zoiets eens van http://www.bf2s.com gehaald. Als het goed is moet je hetzelfde resultaat krijgen als het "Get Stats" gedeelte...

Wellicht werkt het, ik heb het zelf nog nooit geimplementeerd.

Het is als volgt op de pagina geimplementeerd.

<script type="text/javascript" src="live-request.js"></script>

<script>
var inputId = "hpid";
var outputId = "quicksearch";
var processURI    = "http://www.bf2s.com/find.php";
var processQuery  = "pid";
var emptyString   = "";
var workingString = "Searching players...";
</script>

Het javascript zit in de bijlage.

Het formulier ziet er zo uit:

//Het meerendeel van de CSS staat ver weg, deze staan in hetzelfde document
<style>
#get-stats {
position: relative;
}

#quicksearch {
position: absolute;
top: 120px;
left: 20px;
background: #474642;
border: 1px solid #111;
width: 243px;
}

#quicksearch ul ,
#quicksearch li {
margin: 0;
padding: 0;
list-style: none;
}

#quicksearch li a {
display: block;
_height: 1px;
border: 0;
font: normal 10px Verdana;
padding: 3px 10px;
border-bottom: 1px solid #333;
}

#quicksearch li a:hover {
background: #575652;
}
</style>
// Formulier
<div id="get-stats" class="col-section">
  <h2>Get Stats</h2>
  <div class="id">
    <p>Get your Battlefield 2 ranked stats by entering your PID number here. Don't know your PID? Just type your nick in and I'll find you as best I can.</p>
    <form action="http://bf2s.com/find.php" method="get">
      <label for="hpid"><strong>PID or Nick</strong></label><br/>
      <input type="text" name="pid" id="hpid" autocomplete="off" />
      <input type="submit" class="btn" value="Get Stats" />
    </form>
    <div id="quicksearch"></div>
  </div>
</div>

En als het goed is moet dit het achterliggende PHP script zijn:

<?php
//
$db_cid = mysql_connect('localhost','YOUR-USER-NAME','YOUR-PASSWORD')
	or die("<p><b><font color=red>Oh Crap!</font></b></p>/n<p>It seems MySQL is down. (Mysql Connection Error: " . mysql_error() . ") so please try again later.</p>");
//
function db_query($sql) {
	global $db_cid;
	$result = mysql_db_query('YOUR-DATABASE',$sql,$db_cid)
		or die("<p><strong>Error in MySQL Query:</strong><br />$sql</p><p><strong>MysQL Says:</strong><br />" . mysql_error() . "</p>" );
	return $result;
}
//
$searchQuery = urldecode($_REQUEST[s]);
//
$sql = "SELECT keyword, title, summary, text FROM posts WHERE "
      ."title LIKE '$searchQuery' OR "
      ."summary LIKE '$searchQuery' OR "
      ."text LIKE '$searchQuery' "
      ."LIMIT 5 ";
//
$result = db_query($sql);
//
if(mysql_num_rows($result) > 0) {
	echo("<ol>");
	while($row = mysql_fetch_array($result)) {
//
		echo("<li><a href=/"/url-to-entry/$row[keyword]/">$row[title]</a><br />$row[summary]</li>");
//
	}
	echo("</ol>");
} else {
	echo("<p>No results for /"$searchQuery/".</p>");
}
//
?>

 

[Johantrax]

Ziet er doenbaar uit.
Ik ga me er morgen eens in verdiepen.

Bedankt voor de reactie
--Johan

(voorlopig opgelost indien er geen problemen meer rijzen bij de implementatie)