In Webflow, what is the best way to display a 'no matching results' text when no results are found from select fields on a page?
To display a "no matching results" text when no results are found from select fields on a page in Webflow, you can use conditional visibility and custom code. Here's how you can achieve this:
Create a div block that will contain the "no matching results" text. Give it a class name, such as "no-results-text".
Set the initial state of the div block to be hidden. This can be done by setting its display property to "none".
Create a dynamic list that will be populated with the select field's data. Configure the dynamic list to filter based on the select field's value.
Inside the dynamic list, add an empty state (a message to display when no results are found) and style it according to your design preferences.
Select the dynamic list and go to the Settings panel on the right-hand side.
Under the Conditional Visibility section, click on the "+" button to add a new condition.
In the condition builder, select the select field you want to filter by and choose "is" or "is not" as the condition.
Enter a value that doesn't exist in the select field's options. For example, if your select field is for colors and you want to show the "no matching results" text when no red options are selected, you can enter "Red123" as the value.
Apply the condition to the dynamic list and the empty state message.
Now, when no results match the select field's value, the "no matching results" text (the div block you created in step 1) will be shown.
To hide the "no matching results" text when there are results, you can add another condition to the dynamic list that checks if the select field's value is anything other than the value you used in the previous condition.
If you want to further customize this feature, you can use custom code to add more logic and styling to the "no matching results" text. For example, you can animate the appearance or add a different message based on the specific select field value.
