React + NextJS + TailwindCSS - typeahead

Ten blog będzie służył jako swego rodzaju notatki. A ponieważ lubię dzielić się wiedzą to może komuś ta wiedza się przyda.

Ten post będę traktował raczej jak skrót myślowy, na samym wstępie tworzymy komponent z polem tekstowym stworzonym w TailwindCSS

<form class="w-full">

<div className='flex md:flex-row flex-col md:items-center

md:justify-center items-start justify-start mb-5'>

<div className=' font-mono text-slate-400 px-1'>{title}</div>

<div className='w-full relative inline-block'>

<div class="flex items-center border-2 border-blue-400 py-2">

{icons}

<input value={value} onChange={onChange}

className={` appearance-none bg-transparent border-none w-full

text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none `}

placeholder={placeholder} />

</div>

</div>

</div>

</form> 

Następnie tworzymy metodę która będzie wyszukiwać w naszej tablicy województwa 

const onchangehandler = (e) => {

let value = e;

const tablica = data[0].title;

const regex = new RegExp(`^${value}`, `i`);

console.log(tablica.filter(v => regex.test(v)))

if(e == null)

{return setopenddb(false)

;}

if(tablica)

return settypeahead(tablica.filter(v => regex.test(v))), setopenddb(true)

}