Example Description
In this example we demonstrate how to search a list of real-estate properties according to multiple types of components. The results are displayed using a repeater.
To improve performance and UX, we use a debounce timer on the input components.
How We Built It
Collection
We used a collection of real-estate properties which includes all the information that should be displayed in the repeater.
Page Elements
In our site we added the following page elements:
Repeater: To display the properties.
Search components: radio buttons, dropdown, sliders, checkboxes.
Code
Note: We used the lodash NPM module to simplify our code.
In $w.onReady() we run three functions:
initComps() populates the dropdown with entries from the collection, sets the max price, defines the debounce function and binds it to all user input components.
initRepeater() binds the data to the repeater components.
buildFiltersAndPopulateRepeater() creates the filter logic and sends the data to the repeater.
We also Implemented the debounce timer and store it as a variable called debounceFunction. We call this function on input onChange event.
Related Examples
Did this help?
|
Thanks for your feedback!
Search a Database
Let visitors quickly search your site content.
Intermediate
Filter With Multiple Options
Filter a repeater with multiple options using the Selection Tags element.
Intermediate
Custom Store Filters
Filter store products by name and price
Intermediate