TypeError: event.target is undefined whith Turnstone

Fredouze — Mon, 13 Feb 2023 21:06:39 +0000

Hello everyboby i use this input whith Turnstone for de fonction autocomplete. But i this error: TypeError: event.target is undefined. But i am not whith input react. This is a like for Turnstone.
https://turnstone.tomsouthall.com/

This is my component

`import { useId } from "react";
import React from 'react'
import Turnstone from 'turnstone'

const styles = {
input: 'w-full h-12 border border-oldsilver-200 pl-10 pr-7 text-xl outline-none rounded',
query: 'text-oldsilver-800 placeholder-oldsilver-400',
typeahead: 'text-crystal-500 border-white',
cancelButton: absolute w-10 h-12 inset-y-0 left-0 items-center justify-center z-10 text-crystal-600 inline-flex sm:hidden,
clearButton: 'absolute inset-y-0 right-0 w-8 inline-flex items-center justify-center text-crystal-500 hover:text-hotpink-300',
listbox: 'w-full bg-white sm:border sm:border-crystal-500 sm:rounded text-left sm:mt-2 p-2 sm:drop-shadow-xl',
groupHeading: 'cursor-default mt-2 mb-0.5 px-1.5 uppercase text-sm text-hotpink-300',
item: 'cursor-pointer p-1.5 text-lg overflow-ellipsis overflow-hidden text-oldsilver-700',
highlightedItem: 'cursor-pointer p-1.5 text-lg overflow-ellipsis overflow-hidden text-oldsilver-700 rounded bg-crystal-100',
match: 'font-semibold',
noItems: 'cursor-default text-center my-20'
}

// Set up listbox contents.
const listbox = {
displayField: 'name',
data: (query) =>
fetch(https://localhost:8000/livesearch?query=${encodeURIComponent(query)}&limit=10)
.then(res => res.json())
}

function TextField({ placeholder, labelTitle, value, onChange, error, name }) {

const id = useId();

const handleChange = (event) => {
    onChange(event.target.value);
}

return (

        <Turnstone id="autocomplete" listbox={listbox} styles={styles} typeahead={false} value={ value } name='ville'  onChange={ handleChange } placeholder="Enter a city or airport"/>

);

}

export default TextField;`

Thanks for your reponses!

I wold like creat search engine whit React/php

Fredouze — Mon, 23 Jan 2023 21:32:39 +0000

Hello every body! Il french and sory for my rough english. I creat now a search engine whit React and php but they are nothing result, and nothing message for error exept "Firefox cannot establish a connection to the server at ws://localhost:3000/ws." in a console.

This is my App for react:

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} />
}

And this is my PHP is name query in my Wamp.

<?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);


?>

Thank you for your consideration!

DEV Community: Fredouze

TypeError: event.target is undefined whith Turnstone

I wold like creat search engine whit React/php