Voici un moteur de recherche qui effectue une requête dans la base de donnée et propose en direct (par le biais de JQuery) une ébauche de résultat pour ensuite afficher une page plus complète si nécessaire.
L'archive du projet contient 3 fichiers :
index.php: qui contient le champs de recherche avec autocompletation JQuery.
ACSearch.php: qui contient la requête effectuer à la base de donnée pour retourner les résultats de l'autocompletation.
recherche.php: qui donne la page des propositions plus complète et plus détaillée.
Détail de l'autocompletation :
Au block <style> de la ligne 9, j'ai rajouté une limite de hauteur pour la box d'autocompletation et éviter que elle parte en couille en dehors de l'écran de l'utilisateur si le nombre de propositions est trop élevé.
Le block <script> de la ligne 17, est la fonction d'autocomletation de JQuery, il demande à la page source les données à afficher (doit être encoder en json)
x-webkit-speech est un système de reconnaissance vocal fournit par les serveurs google uniquement compatible avec les moteurs de rendu webkit (Google Chrome/Safari/Edgium/Opera...)
Le <input> submit qui n'est pas affiché permet à l'utilisateur de pouvoir cliquer sur "entrer" sans devoir déplacer la souris, intuitif et sans bouton à customiser pour l'intégration dans le site.
Dans le fichier ACSearch.php:
- On se connecte à la base de donnée.
- On effectue la recherche dans un cadre limité pour éviter un trop grand nombre de propositions sur une proposition qui doit être rapide.
- Dans cet exemple, nous prenons uniquement les titres qui commencent par la recherche, cela limite considérablement les réponses inutiles. Vous devez adapter la recherche pour les tables et les colonnes que vous souhaitez rechercher, pour cela vous pouvez effectuer plusieurs requêtes à destination du serveur, mais il ne faut pas que cela soit trop longs pour éviter que l'utilisateur rentre sur la page de recherche avant même toutes propositions.
- Pour finir il faut impérativement penser à la conversion json, les données envoyées à JQuery sont stockées dans une liste.
Détail de la recherche :
Maintenant que l'utilisateur a été redirigé vers la page recherche.php (avec l'aide l'autocompletation ou non)
On va dans un premier temps trier les personnes qui ont trouvé par l'autocompletation et donc qui on déjà un résultat valide (avec la page qu'il souhaite voir):
On re-effectue une requête avec ce que nous a envoyé l'utilisateur:
S'il a utilisé l'autocompletation, il ne devrait avoir qu'une seule proposition, si c'est le cas alors on redirige l'utilisateur directement vers la page trouvée (par l'id ou un autre moyen dépendant de la structure de votre site).
N.B.:La redirection HTTP doit se faire avant TOUTES écriture de code HTML(erreur classique de débutant).
S'il n'y a pas qu'une seule proposition alors on effectue une recherche plus poussée et complète pour permettre à l'utilisateur d'avoir un large choix même inutile mais cela doit être classé de la proposition la plus pertinente à la moins pertinente.
Pour notre exemple l'utilisateur fait un recherche sur une liste de film et une description qui les accompagne pour la recherche "ass".
- Notre première requête nous donne les films uniquement commençant par la recherche demandée (Assassinat pour "ass"). Une liste très faible et ordonnée par ordre alphabétique, que l'on ajoute directement dans cet ordre pour les résultats les plus pertinents.
- Notre 2ème requête nous donne une réponse contenant les titres pour lesquels il contient "ass", cette liste est plutôt importante car il peut aussi bien nous sortir Ninja assassin que Abraham Lincoln - Chasseur de Vampire.
Donc nous trions par le nombre d'occurrences correspondantes dans la description : celui qui est placé avant est celui qui en a le plus. Pour cela je créé 2 listes qui ont pour chacune la clé = l'id du film et pour la valeur l'une les donnée du film et l'autre le nombre d'occurrences.
On trie ensuite le nombre d’occurrences avec la fonction arsort et on ajoute les données en fonction de l'ordre donné avec la fonction arsort - A ce stade nous pouvons considérer avoir récolté une bonne petite liste MAIS
Nous effectuons une 3ème requête pour avoir toutes les occurrences dans les descriptions. On re-trie encore une fois par le nombre d'occurrences pour affiner la recherche.
Nous avons notre liste de films, cependant pour plus de confort et permettre à l'utilisateur de savoir pour quelle raison il a eu ces réponse: on souligne les choix avec une REGEX par exemple
<p> $pattern = '/('.$_POST['ACSearch'].')/i';<br /> $replacement = '<span id="OccurenceRecherche">$1</span>';<br /> $Ligne['Description'] = preg_replace($pattern, $replacement, $Ligne['Description']); </p>Oui, une REGEX plutôt que la fonction Replace de php car il ne faut PAS respecter la casse
Et on applique la fonction uniquement dans la description et pas dans le titre car on évite de rendre aveugle nos utilisateurs avec trop de couleurs flashy ou du soulignage à plus rien n'y comprendre. Si vos recherches sont bien classées les premières réponses doivent être d'une évidence flagrante.J'affiche ça sous forme d'un tableau (qui n'est pas mis en page parce que yolo), chaque peut mener vers un lien grâce au script javascript ligne 28 qui redirige si tu cliques dessus.
Pour la mise en page du tableau je conseille une ligne sur 2 une couleur background commune avec une légère différence de nuance pour séparer les lignes.
Et un background complètement différent avec un tr:hover (quand tu passes la souris dessus) et une modification du pointeur car ce n'est pas un lien à l'origine.
Et pour finir, CE TRAVAIL EST LOIN D'ÊTRE PARFAIT
- On considère dans l'exemple qu'il n'y a qu'une seule table mais vous pouvez à chaque fois avoir plusieurs tables.
- Le choix de l'ordre n'est pas parfait non plus car cela ne sert à rien de chercher avant ET après tout ce qui peut contenir "ass" dans la description c'est un peut tiré par les cheveux.
- Vous pouvez faire en sorte de créer plusieurs pages de recherche car absolument tout est sur la même page (ou au moins mettre un slider)
- Mettre un peu de css ne serait peut-être pas mal non plus ... :-°
Bref merci pour votre attention pour ce 1er article !!!
