Dear Wix Community and Moderators,
I am new to Wix, with a first relative simple website and today with bigger appetite to build dynamic pages with multi-criterias search capabilities.
My use-case if relatively simple nevertheless I am struggling to make it work. My intend is to call a database of real-estate assets (like villas, apartments, lands) with capability for the end-user to select his search criterias (like ‘how many rooms’, ‘which kind of assets’ etc.) and then execute the search.
Using the Wix Code API page and after checking many of the video tutorials and demo materials, I came out with a very easy codeline where I am asking to retrieve all assets with 4 rooms being a “Villa” (house). This is embeded in my eSearch button and when end-user clicks on it, he gets the results back.
That’s quite easy until now!
And next step hurts me: I would like to change the search parameters from plain text (“4”, “Villa”) to inputs end-user types or selects in the page (whether this is an input_text field, a radio buttons etc.)
In the example below, I have created a drop-down menu to let my end-user selects the number of rooms. I called it iRooms with a change event that is currently empty! I am searching on the API documentation but cannot understand what lines of code to enter there, and also what references to give in the eSearch function…
That’s very frustratic and as you can guess, I’m completly beginner in Javascript :(((
my code**
import wixData from “wix-data”;
$w.onReady(() => {
loadRoomsTable();
});
export function iRooms_change(event) {
//that’s where I have no idea what code to add!!
}
export function eSearch_click(event) {
$w(“#dataset1”).setFilter( wixData.filter()
.eq(“rooms”, “4”)
.eq(“type”, “Villa”)
);
}
function loadRoomsTable() {
wixData.query(‘RoomsTable’)
.find()
.then(res => {
let options = [{“value”: ‘’, “label”: ‘All Rooms’}];
options.push(…res.items.map(rooms => {
return {“value”: rooms.title, “label”: rooms.title};
}));
$w(‘#iRooms’).options = options;
});
//copied from Wix tutorial for filtering a database
}
I would be very happy to see some answers of yours, I would guess it’s rather easy for a regular javascript developer…
Any help would me much more than welcomed :))
Thanks,
Christophe
Screenshot below is what I am targetting as a begining. My end-user selects ‘4 rooms’ and gets the dataset reult filtered with only assets having 4 rooms.
