Skip to content

Instantly share code, notes, and snippets.

@sdmg15

sdmg15/engine_json.html

Last active June 15, 2016 04:15
Show Gist options
  • Save sdmg15/6deab55f7f34fb6cfc604f82bce64bec to your computer and use it in GitHub Desktop.
Save sdmg15/6deab55f7f34fb6cfc604f82bce64bec to your computer and use it in GitHub Desktop.
Download ZIP
Simple search engine of towns based on DOM to parse received data.
Raw
engine_json.html
<!doctype html>
<html>
<head>
<title>Search engine </title>
<meta charset="utf-8">
</head>
<body>
<style>
#search{
width: 800px;
height: 40px;
margin: 200px;
font-size: 1.3em;
position: relative;
}
#results{
margin-left: -2px;
height: auto;
position: absolute;
border: 0.8px solid ;
top: 236px;
left: 210px;
width: 804px;
}
.resultatRecherche{
padding-left: 10px;
cursor: pointer;
padding-bottom: 10px;
}
.resultatRecherche:hover,.focusedResult{
background: silver;
opacity: 0.8;
}
.subInformations{
padding-left: 30px;
}
.firstSpan{
font-weight: bold;
}
</style>
<form method="" action="" name="searchForm" id="form">
<input type="text" name="search" id="search" autocomplete="off">
<p id="results">
</p>
</form>
<div id="error"></div>
<script>
(function(){
var searchElement = document.getElementById('search'),
searchResults = document.getElementById('results'),
previousRequest,
previousValue = searchElement.value,
form = document.getElementById('form'),
selectedResult = -1,
firstResult;
var valeurRecue,
scroll = searchElement.scrollTop,
monnaie,
lang;
/* TODO : Garder la position du curseur lorsqu'on press les keyCode == 38 et */
function executeRequest(data){
var xhr = new XMLHttpRequest();
xhr.open('GET','./machine.php?q=' + encodeURIComponent(data));
xhr.overrideMimeType('text/xml');
xhr.addEventListener('readystatechange',function(){
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
displayResults(xhr);
}else if(xhr.status == 3){
document.getElementById('error').appendChild(document.createElement('div')).innerHTML = '<img src="ajax-loader.png">';
}
},false);
xhr.send(null);
return xhr;
}
function displayResults(xhr){
var response = xhr.responseXML.getElementsByTagName('div'),
tailleResponse = response.length;
searchResults.style.display = tailleResponse ? 'block': 'none';
if(response.length){
searchResults.innerHTML = '';
for (var i=0, divResults,p,span; i< tailleResponse ; i++){
//Div qui contiendra chaque résultat après un tour de la boucle
divResults = document.createElement('div');
divResults.className = 'resultatRecherche';
//Ajout des villes comme premier enfant avant de pouvoir add les autres informations en bas
span = document.createElement('span');
span.className = 'firstSpan';
span.appendChild(document.createTextNode(response[i].firstElementChild.firstChild.data));
divResults.appendChild(span);
//p qui contiendra les informations connexes à une ville
p = document.createElement('p');
p.className = 'subInformations';
//Les noeuds text que contiendra le paragraphe
monnaie = document.createTextNode(' Monnaie : ' + response[i].firstElementChild.nextElementSibling.firstChild.data);
lang = document.createTextNode(' Langue : ' + response[i].firstElementChild.nextElementSibling.nextElementSibling.firstChild.data);
//Ajout des noeuds textes au p
p.appendChild(monnaie);
p.appendChild(document.createElement('br'));
p.appendChild(lang);
//Ajout du para au divResults
divResults.appendChild(p);
searchResults.appendChild(divResults);
divResults.addEventListener('click',function(e){
chooseResults(e.currentTarget);
},false);
}
}
//Récupération de la première valeur de la liste des résultats
if(searchResults.firstElementChild === null){
valeurRecue = ' ';
}else{
valeurRecue = searchResults.firstElementChild.firstElementChild.firstChild.data;
}
var st = searchElement.value.substring(0,searchElement.selectionStart),
current = searchElement.value.substring(searchElement.selectionStart, searchElement.selectionEnd),
end = searchElement.value.substring(searchElement.selectionEnd);
var endVal = valeurRecue.toLowerCase(); //Madrid
var chunkedVal = endVal.substring(previousValue.length); // drid
var previousValueChunkedVal = previousValue + chunkedVal;
//Conditions d'autocompletion
if(searchElement.value)
{
//Vérifie si les caractères entrée correspondent au moins à un de ceux du premier résultat de la recherche
if(endVal.indexOf(searchElement.value.toLowerCase()) != -1 ){
//Vérifie si la valeur précedement entrée + la valeur coupée sont égales à la chaîne finale
if( previousValueChunkedVal.toLowerCase() == endVal )
{
searchElement.value = previousValue + chunkedVal;
searchElement.setSelectionRange( previousValue.length , chunkedVal.length + previousValue.length + end);
searchElement.scrollTop = scroll;
searchElement.focus();
}
}
}else {
valeurRecue = ' ';
}
}
function chooseResults(result){
searchElement.value = previousValue = result.firstChild.firstChild.data;
searchResults.style.display = 'none';
selectedResult = -1;
searchElement.focus();
}
searchElement.addEventListener('keyup',function(e){
var divsResults = document.getElementsByTagName('div'),
length = divsResults.length;
//Touche haut
if(e.keyCode == 38 && selectedResult > -1){
divsResults[selectedResult--].className = 'resultatRecherche';
if(selectedResult > -1){
divsResults[selectedResult].className ='resultatRecherche focusedResult';
searchElement.className ='';
}
}
//Touche bas
else if(e.keyCode == 40 && selectedResult < length - 1){
searchResults.className = '';
searchResults.style.display = 'block';
if(selectedResult > -1 ){
divsResults[selectedResult].className = 'resultatRecherche';
}
divsResults[++selectedResult].className = 'resultatRecherche focusedResult';
}
//Touche Entrée
else if(e.keyCode == 13 && selectedResult > -1 ){
chooseResults(divsResults[selectedResult]);
}
//Sinon si la valeur précedement entrée est différente de la nouvelle valeur alors on lance une nouvelle requête !
else if ( searchElement.value != previousValue ){
previousValue = searchElement.value;
if(previousRequest && previousRequest.readyState < XMLHttpRequest.DONE){
previousRequest.abort();
delete xhr;
}
previousRequest = executeRequest(previousValue);
selectedResult = -1;
}
},false);
})();
document.getElementById('form').addEventListener('submit',function(e){ e.preventDefault();},true);
</script>
Raw
machine.php
<?php
header('Content-type: text/xml;charset=utf-8');
$data = unserialize(file_get_contents('townsJson.txt'));
$results = [];
$taille = count($data);
$q= trim($_GET['q']); //Will be set after tests went well :!
sort($data);
$xml = new DomDocument('1.0','utf-8');
$xml->appendChild($xml->createElement('divisions'));
for($i = 0; $i < $taille && count($results) < 10; $i++){
if(is_array($data[$i])){
if(stripos($data[$i]['Ville'],$q) === 0){
$division = $xml->createElement('div');
$ville = $xml->createElement('ville',$data[$i]['Ville']);
$monnaie = $xml->createElement('monnaie',$data[$i]['Monnaie']);
$lang = $xml->createElement('Lang',$data[$i]['Langue officiel']);
$division->appendChild($ville);
$division->appendChild($monnaie);
$division->appendChild($lang);
$xml->documentElement->appendChild($division);
}
}
}
echo $xml->saveXML();
Raw
townJson.txt
a:83:{s:10:" Amsterdam";a:3:{s:5:"Ville";s:9:"Amsterdam";s:7:"Monnaie";s:10:"Euro (€)";s:15:"Langue officiel";s:8:"Allemand";}s:6:" Alger";a:3:{s:5:"Ville";s:5:"Alger";s:7:"Monnaie";s:15:"Dinar algérien";s:15:"Langue officiel";s:5:"Arabe";}i:0;s:11:" Antanarivo";i:1;s:7:" Anvers";i:2;s:9:" Athènes";s:11:" Athlético";a:3:{s:5:"Ville";s:10:"Athlético";s:7:"Monnaie";s:8:"Euro €";s:15:"Langue officiel";s:9:"Espagnole";}s:8:" Abidjan";a:3:{s:5:"Ville";s:7:"Abidjan";s:7:"Monnaie";s:9:"Franc CFA";s:15:"Langue officiel";s:9:"Français";}i:3;s:7:" Bagdad";i:4;s:7:" Bilbao";s:10:" Barcelone";a:3:{s:5:"Ville";s:9:"Barcelone";s:7:"Monnaie";s:11:" Euro (€)";s:15:"Langue officiel";s:9:"Espagnole";}i:5;s:7:" Breton";s:7:" Bamako";a:3:{s:5:"Ville";s:6:"Bamako";s:7:"Monnaie";s:10:" Franc CFA";s:15:"Langue officiel";s:9:"Français";}i:6;s:7:" Bankok";s:7:" Berlin";a:3:{s:5:"Ville";s:7:" Berlin";s:7:"Monnaie";s:10:"Euro (€)";s:15:"Langue officiel";s:8:"Allemand";}i:7;s:7:" Bombay";i:8;s:9:" Brasilia";s:11:" Brazaville";a:3:{s:5:"Ville";s:10:"Brazaville";s:7:"Monnaie";s:9:"Franc CFA";s:15:"Langue officiel";s:9:"Français";}i:9;s:6:" Brest";i:10;s:8:" Budapes";i:11;s:10:" Bruxelles";i:12;s:13:" Buenos aires";i:13;s:8:" Caracas";i:14;s:11:" Casablanca";i:15;s:8:" Chicago";i:16;s:11:" Copenhague";i:17;s:6:" Dakar";s:8:" Dschang";a:3:{s:5:"Ville";s:7:"Dschang";s:7:"Monnaie";s:9:"Franc CFA";s:15:"Langue officiel";s:9:"Français";}i:18;s:9:" Florence";i:19;s:8:" Foumbam";s:7:" Figuil";a:3:{s:5:"Ville";s:6:"Figuil";s:7:"Monnaie";s:9:"Franc CFA";s:15:"Langue officiel";s:9:"Français";}i:20;s:8:" Genève";s:7:" Guider";a:3:{s:5:"Ville";s:6:"Guider";s:7:"Monnaie";s:9:"Franc CFA";s:15:"Langue officiel";s:20:"Français, Fulfuldé";}i:21;s:10:" Hong Kong";i:22;s:9:" Istanbul";i:23;s:5:" Idem";i:24;s:8:" Jakarta";i:25;s:9:" Kinsasha";i:26;s:10:" La Havane";s:6:" Lagos";a:3:{s:5:"Ville";s:6:" Lagos";s:7:"Monnaie";s:5:"Naira";s:15:"Langue officiel";s:7:"Anglais";}i:27;s:7:" Le cap";i:28;s:6:" Lille";i:29;s:5:" Lima";i:30;s:9:" Lisbonne";i:31;s:8:" Londres";i:32;s:12:" Los Angeles";i:33;s:5:" Lyon";i:34;s:7:" Madrid";i:35;s:8:" Manille";i:36;s:10:" Marrakech";i:37;s:10:" Marseille";i:38;s:7:" Mexico";i:39;s:9:" Montrél";i:40;s:13:" MonterCarlos";i:41;s:7:" Moscou";i:42;s:8:" Nairobi";i:43;s:9:" New-York";i:44;s:5:" Nice";i:45;s:5:" Oslo";i:46;s:7:" ottawa";i:47;s:6:" Paris";i:48;s:7:" Pékin";i:49;s:7:" Prague";i:50;s:8:" Québec";i:51;s:15:" Rio de Janeiro";i:52;s:5:" Rome";i:53;s:18:" Saint Pestesbourg";i:54;s:20:" Santa Fe de Bogaota";i:55;s:9:" Santiago";i:56;s:10:" Sao paulo";i:57;s:7:" Séoul";i:58;s:9:" Séville";i:59;s:8:" Shangai";i:60;s:10:" Stockhlom";i:61;s:11:" Strasbourg";i:62;s:7:" Sydney";i:63;s:10:" Téhéran";i:64;s:6:" Tokyo";i:65;s:8:" Toronto";i:66;s:9:" Toulouse";i:67;s:6:" Tunis";i:68;s:7:" Venise";i:69;s:7:" Vienne";s:11:" Washington";a:3:{s:5:"Ville";s:10:"Washington";s:7:"Monnaie";s:8:"Dollar $";s:15:"Langue officiel";s:7:"Anglais";}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment