Location selector

by lmeurs

HTML

<div id="app"></div>

CSS

input {
  font: 14px/1 sans-serif;
  margin: 10px 0;
  padding: 5px;
}

p {
  font: 14px/2 sans-serif;
  margin: 2px 0;
}

strong {
  display: inline-block;
  font-weight: 400;
  /* color: white; */
  background: pink;
}

React

const SearchWithFilter = () => {
  const [query, setQuery] = React.useState("");
  const [queryAfterDelay, setQueryAfterDelay] = React.useState("");

  const applyNameFilter = (location) => {
    return !query || location.toLowerCase().includes(query.toLowerCase())
  }

  const getLocationRendered = (location) => {
    return <p dangerouslySetInnerHTML={{ __html: '* ' + location.replace(RegExp('(' + query + ')', 'i'), '<strong>$1</strong>') }} />
  }

  const filteredLocations = locations
    .filter(applyNameFilter)
    .map(getLocationRendered)

  React.useEffect(() => {
    const timeOutId = setTimeout(() => setQuery(queryAfterDelay), 500);
    return () => clearTimeout(timeOutId);
  }, [queryAfterDelay]);

  return (
    <div>
      <input placeholder="Vind je locatie..." autoFocus onChange={event => setQuery(event.target.value)} />
      <p>{ filteredLocations.length == 0 ? 'Geen locaties gevonden, pas je zoekopdracht aan' : '' }</p>
      {filteredLocations}
    </div>
  );
}

const locations = `

Alkmaar - Picassolaan
Almelo - Vriezenveenseweg
Almere - Engelse mijl
Almere - Markerkant CNO
Amersfoort - Barchman Wuytierslaan
Amersfoort - De Brand
Amersfoort - Plotterweg
Amstelveen - Bouwerij
Amsterdam - Hogehilweg
Amsterdam - Luttenbergweg
Amsterdam - Motorkade
Amsterdam - Oude Haagseweg
Amsterdam - Tafelbergweg AMV
Amsterdam - Westerhoofd - Galaxy
Amsterdam - Willinklaan
Apeldoorn - Deventerstraat
Arnhem - Elderhofseweg
Arnhem - Europaweg
Arnhem - Frombergstraat
Arnhem - Groningensingel
Arnhem - Nieuwe kade (Schip)
Arnhem - Velperweg
Assen - Balkenweg
Assen - De Haar (TT-hal)
Assen - Schepersmaat
Baarn - Amsterdamsestraatweg
Baexem - Exaeten
Balk - Wikelerdyk
Barendrecht - Zuider Carnisseweg
Beekbergen - Schalterdalweg
Beetsterzwaag - Beetsterweg
Berg en Dal - Molenbosweg
Bergen - Egmond - Noordvelderweg
Bergschenhoek no - Tobias Asserlaan
Bergschenhoek pol - Tobias Asserlaan
Blaricum - Rijksstraatweg
Bodegraven - Goudseweg
Breda - Hooghout
Breda -...