Bonjour à tous je me sert de ce Github afin de pouvoir créer un moteur de recherche.

https://github.com/tomsouthall/turnstone

Mais je n'ai aucune réponse et mon console log indique pas d'erreur.

Je voudrait que ce Data.js soit remplacer par une réponse en php interroger en GET ou Post.

https://github.com/tomsouthall/turnstone/blob/main/src/data.js

Donc voici mon App.js

import React from 'react'
import Turnstone from 'turnstone'

const styles = {
  input: 'border p-2 bg-white w-full',
  listbox: 'border p-2 bg-white w-full'
}

// Set up listbox contents.
const listbox = {
  
  data: (query) =>
    fetch(`http://essai/mr/query.php?query=${encodeURIComponent(query)}`)
      .then(res => res.json())
}




console.log(listbox);

export default function BasicExample() {
  return <Turnstone id="autocomplete" listbox={listbox} styles={styles} typeahead={false} />
}

Voici le PHP qui interroge ma base de donnée.

<?php


header('Access-Control-Allow-Origin: http://localhost:3000');


 header("Content-Type: application/json");

$nbr = 0;

$data = array();
 
$output = '';
 
$name = $_GET['query'];

 


//fetch.php
$connect = mysqli_connect("localhost", "root", "", "immoffre");
$output = '';
if(isset($name))
{
 $search = mysqli_real_escape_string($connect, $name);
 $query =  "
 SELECT * FROM villes_france 
 WHERE ville_nom LIKE '%" . $search . "%'
 OR ville_slug LIKE '%" . $search . "%' 
 OR ville_code_postal LIKE '%" . $search . "%' 
 LIMIT 5
";
}
else
{
 $query = "
  SELECT * FROM tbl_customer ORDER BY CustomerID
 ";
}
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
 
 while($row = mysqli_fetch_array($result))
 {


    $nbr++;
    $data[$nbr]   =   $row["ville_nom"];
 


 
 }
 
}
 
echo json_encode($data);

 
?>

Cordialement

Bonjour, pour vérifier que le problème vient bel et bien du serveur est-ce que tu peux tester ton code avec des données statiques à la place de la requête réseaux.

import React from 'react'
import Turnstone from 'turnstone'
 
// Set up listbox contents.
const listbox = {
   
  data: ['Peach', 'Pear', 'Pineapple', 'Plum', 'Pomegranate', 'Prune']
}
 
 
 
 
console.log(listbox);
 
export default function BasicExample() {
  return <Turnstone id="autocomplete" listbox={listbox} />
}

Si ce code minimal tirait de la doc:

GitHub - tomsouthall/turnstone: React customisable autocomplete component with typeahead and grouped results from multiple APIs.

ne fonctionne pas ça sert à rien d'essayer de débugger le PHP le problème vient de l'implémentation de Turnstone dans l'application React.

EDIT:

Tu peux aussi ouvrir ta console de développement et voir si il n'y a pas de messages d'erreur logger par Javascript, et si il y en a il faut que tu nous les indiques pour qu'on puisse t'aider.

Aussi a noter que dans ton fichier PHP tu définit une règle CORS tel que:

header('Access-Control-Allow-Origin: http://localhost:3000');

Il faut noter que le port de communication fait partie du domaine, donc pense à vérifier que ton application React tourne bel et bien, sur localhost avec le port 3000 et pas genre 3001 où un autre port de communication sinon ça marchera pas.

-
Edité par SamuelGaborieau3 25 janvier 2023 à 1:43:41