Barre de recherche interne

**BROADSIDER** · 25/02/2019, 01h01

Bonjour,
Je cherche actuellement à m’entraîner sur un système de barre de recherche avec auto-complétion mais je bloque au moment d'adapter mon php d'entrainement à mon php sur mon site final. Car effectivement mon site fonctionne quand j'utilise un tableau linéarisé mais cela est peu pratique, donc j'aimerais le même fonctionnement mais en etant directement connecté à ma base de données mais problème ca ne fonctionne pas et je ne vois pas pourquoi... Je pense que cela viens de ma variable $tableau_empiretau mais j'ai beau retourné le problème je ne comprend pas et n'arrive pas à avancé... J'espère que quelqu'un pourra me venir en aide je met tout ici avec le plus d'info possible pour simplifier la compréhension.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
    <?php
    $pdo= new PDO('mysql:host=localhost;dbname=******', '*****', '*****');
function list_empiretau($pdo_fonction){
    $requete = $pdo_fonction->prepare('SELECT nom, cout, prix, dispo, url, s FROM empire_tau');
    $requete -> execute();
    $tableau_empiretau = $requete -> fetchAll();
    return $tableau_empiretau;
 
 
	$dataLen = count($tableau_empiretau);
 
	sort($tableau_empiretau);
 
	$results = array(); 
 
	for ($i = 0 ; $i < $dataLen && count($results) < 10 ; $i++) {
	    if(stripos($tableau_empiretau[$i], $_GET["s"]) === 0) { 
 
	        array_push($results, $tableau_empiretau[$i]); 
 
	    }
	}
 
	echo implode('|', $results); 
}	
	?>

et mon code d'entrainement qui fonctionne avec des villes mais avec un tableau linéarisé:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
    <?php
 
	$data = unserialize(file_get_contents('towns.txt')); // Récupération de la liste complète des villes
	$dataLen = count($data);
 
	sort($data); // On trie les villes dans l'ordre alphabétique
 
	$results = array(); // Le tableau où seront stockés les résultats de la recherche
 
	for ($i = 0 ; $i < $dataLen && count($results) < 5 ; $i++) {
	    if(stripos($data[$i], $_GET["s"]) === 0) { // Si la valeur commence par les mêmes caractères que la recherche
 
	        array_push($results, $data[$i]); // On ajoute alors le résultat à la liste à retourner
 
	    }
	}
 
	echo implode('|', $results); // Et on affiche les résultats séparés par une barre verticale |
 
	?>

Et ici la fonction js:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
 
(function() {
 
	var searchElement = document.getElementById('search'),
	    results = document.getElementById('results'),
	    selectedResult = -1, // Permet de savoir quel résultat est sélectionné : -1 signifie "aucune sélection"
	    previousRequest, // On stocke notre précédente requête dans cette variable
    	previousValue = searchElement.value; // On fait de même avec la précédente valeur
 
 
 
	function getResults(keywords) { // Effectue une requête et récupère les résultats
 
	    var xhr = new XMLHttpRequest();
	    xhr.open('GET', './search.php?s='+ encodeURIComponent(keywords));
 
    	xhr.addEventListener('readystatechange', function() {
        	if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
 
	            displayResults(xhr.responseText);
 
        	}
	    });
 
	    xhr.send(null);
 
	    return xhr;
 
	}
 
	function displayResults(response) { // Affiche les résultats d'une requête
 
    	results.style.display = response.length ? 'block' : 'none'; // On cache le conteneur si on n'a pas de résultats
 
	    if (response.length) { // On ne modifie les résultats que si on en a obtenu
 
	        response = response.split('|');
	        var responseLen = response.length;
 
	        results.innerHTML = ''; // On vide les résultats
 
	        for (var i = 0, div ; i < responseLen ; i++) {
 
            	div = results.appendChild(document.createElement('div'));
            	div.innerHTML = response[i];
 
            	div.addEventListener('click', function(e) {
                	chooseResult(e.target);
	            });
 
	        }
 
	    }
 
	}
 
	function chooseResult(result) { // Choisi un des résultats d'une requête et gère tout ce qui y est attaché
 
	    searchElement.value = previousValue = result.innerHTML; // On change le contenu du champ de recherche et on enregistre en tant que précédente valeur
	    results.style.display = 'none'; // On cache les résultats
	    result.className = ''; // On supprime l'effet de focus
	    selectedResult = -1; // On remet la sélection à "zéro"
	    searchElement.focus(); // Si le résultat a été choisi par le biais d'un clique alors le focus est perdu, donc on le réattribue
 
	}
 
 
 
	searchElement.addEventListener('keyup', function(e) {
 
    	var divs = results.getElementsByTagName('div');
 
	    if (e.keyCode == 38 && selectedResult > -1) { // Si la touche pressée est la flèche "haut"
 
	        divs[selectedResult--].className = '';
 
	        if (selectedResult > -1) { // Cette condition évite une modification de childNodes[-1], qui n'existe pas, bien entendu
	            divs[selectedResult].className = 'result_focus';
	        }
 
	    }
 
	    else if (e.keyCode == 40 && selectedResult < divs.length - 1) { // Si la touche pressée est la flèche "bas"
 
        	results.style.display = 'block'; // On affiche les résultats
 
	        if (selectedResult > -1) { // Cette condition évite une modification de childNodes[-1], qui n'existe pas, bien entendu
            	divs[selectedResult].className = '';
	        }
 
        	divs[++selectedResult].className = 'result_focus';
 
	    }
 
	    else if (e.keyCode == 13 && selectedResult > -1) { // Si la touche pressée est "Entrée"
 
	        chooseResult(divs[selectedResult]);
 
	    }
 
    	else if (searchElement.value != previousValue) { // Si le contenu du champ de recherche a changé
 
	        previousValue = searchElement.value;
 
	        if (previousRequest && previousRequest.readyState < XMLHttpRequest.DONE) {
	            previousRequest.abort(); // Si on a toujours une requête en cours, on l'arrête
        	}
 
	        previousRequest = getResults(previousValue); // On stocke la nouvelle requête
 
	        selectedResult = -1; // On remet la sélection à "zéro" à chaque caractère écrit
 
    	}
 
	});
 
})();

**CosmoKnacki** · 27/02/2019, 21h46

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
$pdo = new PDO('mysql:host=localhost;dbname=******', '*****', '*****');
 
function list_empiretau($pdo_fonction) {
    $requete = $pdo_fonction->prepare('SELECT nom, cout, prix, dispo, url, s FROM empire_tau');
    $requete->execute();
    $tableau_empiretau = $requete->fetchAll();
 
    return $tableau_empiretau; // <-- aprés un return, il ne faut pas espérer que la suite du code de la fonction
                               // soit exécuté
 
    $dataLen = count($tableau_empiretau);
 
    sort($tableau_empiretau);
 
    $results = array(); 
 
    for ($i = 0 ; $i < $dataLen && count($results) < 10 ; $i++) {
        if ( stripos($tableau_empiretau[$i], $_GET["s"]) === 0 ) { // $tableau_empiretau est un tableau de tableaux, pas un tableau de
                                                                   // chaînes de caractères
 
	        array_push($results, $tableau_empiretau[$i]); 
        }
    }
 
    echo implode('|', $results); 
}

Désormais, puisque tu utilises la base de données, le tri et la boucle for ne sont plus nécessaires car tu peux le faire directement dans ta requête SQL (WHERE, LIKE, ORDER BY, ASC, LIMIT).

Plus généralement, tu devrais utiliser les outils de base du débogage que sont ini_set('display_errors', 'On'); en début de script pour l'affichage des erreurs et var_dump pour afficher le contenu d'une variable.

**BROADSIDER** · 28/02/2019, 12h08

Du coup j'obtiens ca mais ca ne marche toujours pas:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
$pdo = new PDO('mysql:host=localhost;dbname=******', '*****', '*****');
 
function list_empiretau($pdo_fonction) {
    $requete = $pdo_fonction->prepare('SELECT nom, cout, prix, dispo, url, s FROM empire_tau ORDER BY nom LIMIT 10');//je recupere donc ma table en triant dans l'ordre le champ nom et en affichant une limite de 10 noms
    $requete->execute();
    $tableau_empiretau = $requete->fetchAll();
 
 
    $results = $GET_["nom"]; //je récupère les noms qui sont triés dans l'ordre
    echo implode('|', $results); // et je les affiche précédé d'un caractère qui n'est pas utilisé pour la recherche
}

**CosmoKnacki** · 28/02/2019, 22h25

Bon, je ne vais pas te demander ce qu'est le s dans ta requête parce que j'ai peur de ce que tu vas me répondre. Donc on l'oublie pour l'instant.
Disons que tu as une table empire_tau avec les champs suivants: nom, cout, prix, dispo, url.

Dans un premier temps on va mettre de coté le javascript et juste se concentrer sur le PHP en écrivant un script que tu vas compléter et appeler directement depuis la barre d'adresse de ton navigateur.

But: L'objectif de la fonction comme son nom ne l'indiquait pas (il serait bon de donner des noms clairs aux variables et aux fonctions, ça fait une galère de moins) est de renvoyer, par ordre alphabétique de nom, les dix premiers enregistrements dont le début du nom correspond à une chaîne fournie.

Donc ta fonction doit prendre en paramètre une instance de PDO et la chaîne en question.
Pour que la fonction soit un peu plus générale, on va également ajouter un paramètre pour la limite mais avec 10 comme valeur par défaut.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
ini_set('display_errors', 'On');
 
function getTownsStartingWith(PDO $dbh, string $start, int $limit = 10) {
    $query = 'SELECT nom, cout, prix, dispo, url
              FROM empire_tau
              WHERE nom LIKE CONCAT(:start, "%")
              ORDER BY nom ASC
              LIMIT 0, :limit';
 
    $sth = $dbh->prepare($query);
    $sth->bindValue(':start', $start, PDO::PARAM_STR);
    $sth->bindValue(':limit', $limit, PDO::PARAM_INT);
 
    if ( !$sth->execute() )
        return false;
 
    $results = $sth->fetchAll(PDO::FETCH_FUNC, 'formatRecord');
 
    return implode('|', $results);
}
 
function formatRecord(...$fields): string {
    return implode(',', $fields);
}
 
$host = 'localhost';
$port = ''; // 3306 ?
$database = '';
$usr = '';
$pwd = '';
 
try {
    $dbh = new PDO("mysql:host=$host;port=$port;dbname=$database", $usr, $pwd);
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    echo 'Connection failed: ' . $e->getMessage();
}
 
$start = '';
$limit = 10;
 
echo getTownsStartingWith($dbh, $start, $limit);

Pour le moment ce script doit produire un csv dont le séparateur d'enregistrements est un | (comme tu avais projeter de le faire), mais à mon avis il serait plus pratique de communiquer des données à Javascript avec du JSON.

Bosse la dessus jusqu'à ce que ça marche et que tu obtiennes le format voulu.

Barre de recherche interne

Langage PHP

Vue hybride

Discussions similaires

Partager

Partager