<div
id='search-div-1'
className="search-bar-container"
>
<input
type="text"
placeholder={'Search list 1'}
onInput={(e) => {
setResultList1(list1.filter(item => item.includes((e.target as HTMLTextAreaElement).value)));
}}
onFocus={() => setActiveList('1')}
onKeyDown={(e) => handleKeyDown(e)}
/>
<br />
{resultList1 && activeList === '1' ? SuggestedList() : null}
Cursor: {cursor1}<br />
Selected item: <span id="Item 1">{selectedItem1}</span><br />
</div>
<div
id='search-div-2'
className="search-bar-container"
>
<input
type="text"
placeholder={'Search list 2'}
onInput={(e) => {
setResultList2(list2.filter(item => item.includes((e.target as HTMLTextAreaElement).value)));
}}
onFocus={() => setActiveList('2')}
onKeyDown={(e) => handleKeyDown(e)}
/>
<br />
{resultList2 && activeList === '2' ? SuggestedList() : null}
<div
id='search-div-1'
className="search-bar-container"
>
<input
type="text"
placeholder={'Search list 1'}
onInput={(e) => {
setResultList1(list1.filter(item => item.includes((e.target as HTMLTextAreaElement).value)));
}}
onFocus={() => setActiveList('1')}
onKeyDown={(e) => handleKeyDown(e)}
/>
<br />
{resultList1 && activeList === '1' ? SuggestedList() : null}
Cursor: {cursor1}<br />
Selected item: <span id="Item 1">{selectedItem1}</span><br />
</div>
<div
id='search-div-2'
className="search-bar-container"
>
<input
type="text"
placeholder={'Search list 2'}
onInput={(e) => {
setResultList2(list2.filter(item => item.includes((e.target as HTMLTextAreaElement).value)));
}}
onFocus={() => setActiveList('2')}
onKeyDown={(e) => handleKeyDown(e)}
/>
<br />
{resultList2 && activeList === '2' ? SuggestedList() : null}
