Assistant de saisie semi-automatique (gre list)

5/5 (50 avis)

Vue 24 432 fois - Téléchargée 1 399 fois

Description

Cette source est une excuse pour m'essayer à XMLHTTPREQUEST. A savoir que je n'ai rien inventé mais que je me suis basé sur l'excellent article présent sur http://www.webpasties.com/xmlHttpRequest/index.html. Je conseille à tous ceux qui veulent faire du XMLHTTPREQUEST de lire cet article!

Je me demandais comment marche le système de saisie assistée du moteur de recherche de phpcs... alors voili voilà un code qui fait la même chose: lorsqu'on tape des mots, dès qu'il y a trois caractères, si il y a des mots commencant par ces trois caractères sont connus par la bd, des propositions sont faites. En cliquant sur "definition", on obtient... la définition!

Je me suis basé sur une GRE List de 1162 mots pour m'essayer. Ce code a pour seul but de présenter XMLHTTPREQUEST.

Source / Exemple :



                              • LE FICHIER INDEX.PHP
<html> <head> <title>XMLHTTPREQUEST GRE WORDS QUERY</title> <style type="text/css"> div.prop { height: auto; width: 150px; //overflow: auto; border: 1px solid #666; background-color: #ccc; padding: 8px; font-size: 10px; font-family:verdana; font-weight: bold; visibility:hidden; } input{ border-right : 1px solid #669; border-top : 1px solid #669; font-size : 10px; border-left : 1px solid #669; color : #000; border-bottom : 1px solid #669; font-family : verdana, arial, helvetica, sans-serif; background-color : #f3f3f9; } </style> <script type="text/javascript"> var isWorking = false; // est-ce que le canal est occupé function getHTTPObject() { var xmlhttp; /*@cc_on @if (@_jscript_version >= 5) try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } @else xmlhttp = false; @end @*/ if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp = false; } } return xmlhttp; } var http = getHTTPObject(); // on crée un objet HTTP function treatquery(){ // la requête if (!isWorking && http) { ch = document.send.abr.value; if (ch.length>2){ http.open("GET", "treat.php?abr=" + escape(ch), true); http.onreadystatechange = handleHttpResponse; isWorking = true; http.send(null); } if ((ch.length<3) && (document.getElementById('res').style.visibility == 'visible')) document.getElementById('res').style.visibility = 'hidden'; } } function handleHttpResponse() { // traitement de la demande if (http.readyState == 4) { if (http.responseText.indexOf('invalid') == -1) { var xmlDocument = http.responseXML; var res = xmlDocument.getElementsByTagName('name').item(0).firstChild.data; var elements = res.split(";"); var result; if (elements[0] != ''){ result = "<font color=\"darkblue\">Do you mean...</font><br />"; for (var i=0;i<elements.length;i++){ result = result + "<a style=\"text-decoration:none;color:red;\" href=\"javascript:setQuery('" + elements[i] + "');\">" + elements[i] + "</a><br />"; } result = result + "<hr /><center><a href=\"http://www.noisy.ch\" style=\"text-decoration:none;color:darkgrey;\">pub ici</a></center>"; document.getElementById('res').innerHTML = result; document.getElementById('res').style.visibility = 'visible'; } else document.getElementById('res').style.visibility = 'hidden'; isWorking = false; } } } function setQuery(ch){ document.getElementById('abr').value = ch; document.getElementById('res').style.visibility = 'hidden'; } </script> </head> <body> <form name="send" style="display:inline; position: relative;" action="" method="POST"> <div style="display:inline; position: relative;"> <input type="text" id="abr" name="abr" value="<?php echo $_POST['abr'];?>" style="width: 150px;font-family:verdana; font-size:8pt;color:darkblue;" onkeyup="treatquery();" /> <input type="submit" value="definition" style="font-family:verdana; font-size:8pt;" name="submit" /> <div id="res" style="background-color:white;position: absolute; top: 22px;left: 0px;" class="prop" onmousemove="this.style.visibility='visible';" onmouseout="this.style.visibility='hidden';"> </div> </div> </form> <?php if ((isset($_POST)) && ($_POST['abr']!='')){ include('config.php'); $q = 'SELECT definition FROM dico_gre WHERE name = \''.$_POST['abr'].'\';'; $r = mysql_query($q); if (mysql_num_rows($r)>0){ $res = mysql_fetch_assoc($r); $def= $res['definition']; } else $def = 'no definition known...'; echo '<br /><br /><font face="verdana" size="1" color="darkblue"><b>'.$_POST['abr'].'</b></font><font face="verdana" size="1" color="black">: '.$def.'</font>'; } else echo '<br /><br /><font face="verdana" size="1" color="darkblue"><b> </b></font><font face="verdana" size="1" color="black"> </font>'; ?> </body> </html>
                              • LE FICHIER TREAT.PHP
<?php if ((isset($_GET)) && ($_GET['abr'] != '')){ include('config.php'); $abr = $_GET['abr']; $q = 'SELECT name from dico_gre WHERE name LIKE \''.$abr.'%\''; $r = mysql_query($q); $return = '<?xml version="1.0" standalone="yes"?><result>'; if ((mysql_num_rows($r)>0)){ $name = ''; while ($rep=mysql_fetch_array($r)){ $name .= $rep['name'].';'; } $return .= '<name>'.$name.'</name>'; } if (mysql_num_rows($r)==0) $return .= '<name>;</name>'; $return .= '</result>'; header('Content-Type: text/xml'); echo $return; } ?>

Conclusion :


La base de donnée est

CREATE TABLE dico_gre (name VARCHAR(50) NOT NULL, definition TEXT NOT NULL);

INSERT INTO dico_gre VALUES ('abacus','frame with balls for calculating');
INSERT INTO dico_gre VALUES ('abate','to lessen to subside');
INSERT INTO dico_gre VALUES ('abdication','giving up control authority');
...

La liste fait plus d'un mega (1162 entrées), donc je ne peux pas la mettre ici!
Elle est PROVISOIREMENT disponible sur http://www.noisy.ch/xmlhttprequest/gre/gre.xls, sinon vous pouvez trouver des listes équivalentes via google.

Codes Sources

A voir également

Ajouter un commentaire Commentaires
ouzaamedali Messages postés 10 Date d'inscription lundi 13 décembre 2004 Statut Membre Dernière intervention 15 février 2012
15 févr. 2012 à 13:46
C'est bien fait,
Je vous propose le lien suivant, il suffit juste de créer une base test et les tables proposer pour tester la démo :
http://translate.google.fr/translate?hl=fr&langpair=en|fr&u=http://beski.wordpress.com/2009/11/20/jquery-php-mysql-ajax-autocomplete/
javagirl08 Messages postés 1 Date d'inscription dimanche 27 janvier 2008 Statut Membre Dernière intervention 28 juin 2010
28 juin 2010 à 11:20
bravo et merci
mais pour moi quand je clique sur définition j'ai la définition mais je n'aipas la saisie semi automatique!!
malik7934 Messages postés 1154 Date d'inscription mardi 9 septembre 2003 Statut Membre Dernière intervention 15 août 2009 17
11 janv. 2008 à 12:15
C'est un peu parano de ma part, ceci dit oui il y a des "failles" comme par exemple le fait que la longueur de la string ne soit pas vérifiée/limitée...
frakosun Messages postés 10 Date d'inscription lundi 7 août 2006 Statut Membre Dernière intervention 11 janvier 2008
11 janv. 2008 à 12:04
Bravo et merci pour cette source malik!

Quand tu dis que tu as retiré la démo pour ne pas devoir te battre contre les injections sql, c'est qu'il y a des failles dans ton script alors, non?
tu peux nous en dire plus?
marc660 Messages postés 171 Date d'inscription jeudi 15 avril 2004 Statut Membre Dernière intervention 18 juillet 2007
16 juil. 2007 à 13:32
Bonjour,

Brobleme resolu

J'ai bien recu votre message merci.

@+
Afficher les 50 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.