@Salman A
I'm trying. to replicate this example
It works correctly but I have the following issue:
- if I try to select the country with the mouse, the log console shows "clicked" but does not select the country
- once I tried with the mouse selection, it désactivate the keyboard selection and I am blocked
- if I select "France", it supposed to go to the URL mentioned in the database but nothing happens.
Any idea how can I select the country properly either way keyboard or mouse?
My thoughts is as follows:
Export function onclick is undetermined
Wix location API is absent from the code
It would be very helpful if you can help me to complete the code.
Many many thanks!
import wixData from 'wix-data'; import wixLocation from 'wix-location'; let url; const HL_COLOR = "rgba(190,190,250)"; const REG_COLOR = "rgba(222,222,222)"; let listSize; let currIndex = -1; $w.onReady(function () { $w('#input').onKeyPress((event) => { setTimeout(() => { if ($w('#input').value.length === 0) { currIndex = -1; $w("#rptDropdown").collapse() .then(() => { console.log("Done with collapse"); }); } else { switch (event.key) { case "Enter": $w('#input').value = $w('#rptDropdown').data[currIndex].title; $w("#rptDropdown").collapse() .then(() => { console.log("Done with collapse"); }); break; case "ArrowLeft": case "ArrowRight": break; case "ArrowUp": if (currIndex > 0) { currIndex -= 1; refresh_repeater(); } break; case "ArrowDown": if (currIndex < listSize - 1) { currIndex += 1; refresh_repeater(); } break; case "Escape": $w('#input').value = ''; currIndex = -1; $w("#rptDropdown").collapse() .then(() => { console.log("Done with collapse"); }); break; default: currIndex = -1; wixData.query("Countries") .startsWith("title", $w('#input').value) .ascending("title") .limit(5) .find() .then((res) => { $w('#rptDropdown').data = []; $w('#rptDropdown').data = res.items; listSize = res.items.length; $w('#rptDropdown').expand(); }); break; } } }, 50) }); }); export function rptDropdown_itemReady($item, itemData, index) { $item('#dataset1').text = itemData.title; if (index === currIndex) { $item("#rptBox").style.backgroundColor = HL_COLOR; } else { $item("#rptBox").style.backgroundColor = REG_COLOR; } $item('#container1').onClick(() => { $w('#input').value = itemData.title; $w('#rptDropdown').collapse(); }); } function refresh_repeater() { $w("#rptDropdown").forEachItem(($item, itemData, index) => { $item('#dataset1').text = itemData.title; if (index === currIndex) { $item("#rptBox").style.backgroundColor = HL_COLOR; } else { $item("#rptBox").style.backgroundColor = REG_COLOR; } $item('#container2').onClick(() => { $w('#input').value = itemData.title; $w('#rptDropdown').collapse(); }); }); } export function name_click(event) { //Add your code for this event here: console.log('clicked') }
![](https://static.wixstatic.com/media/a27d24_753efa1e4ade4f2dbc029b65120b9ce4~mv2.png/v1/fill/w_980,h_552,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/a27d24_753efa1e4ade4f2dbc029b65120b9ce4~mv2.png)