Hi - The search bar and the “Find a Property” input fields on my home page should be doing the same thing – sending the input to the Properties page filter field labeled “Property Name / City / State / Zip Code”. It’s working to the extent that the input shows up in the field, but the results aren’t being filtered
I’ve tried going back thru similar posts but am not following exactly how to tweak the scripts that need to be added since I can’t find anything that’s similar enough. Any help would be greatly appreciated!!
Could you share a read-only link? I am having some issues with your page at the moment, seems that there are some weirdly placed closing tags that I can’t pinpoint yet.
A screenshot of the custom code in the site settings would also be great!
Hi Luis – thanks so much for taking a look! There’s custom code on the main site and on Properties page. Much looks like it’s commented out. I inherited this and am not sure as to what happened in the development stage. i’m not sure how to give you a screen shot of all of it – maybe you want a text file?
The lang=en tag … no idea where this comes from or where I’d have control over it? I would think it’s part of the default page structure?
I changed the “name” of the receiving field on the Properties page to “property-input” and changed the action to “/properties” and am getting nothing now. Obviously I’m not understanding the concept, I’m sorry!
We’re looking for the header search field and this “Find a Property” field on the home page to prefilter the list on the Properties page the same as it would by typing directly into the one “Property / Name / City / Zip” field on the Properties page. (Are you saying it could have been done more easily with mutiple fields?)
This honestly could be nothing, just something I noticed when going in to debug the site.
Now for the filtering issue.
I notice you are using the native form action field to redirect the user to /properties which is good if you only want to filter by one field. This avoids the use of extra code.
However, we need to match the name of the home input to the field identifier we use in the property page. If you type something on the field on the property page you’ll see the query shows ?name=something.
So we just need to change the field name from property-input to name
If you’d like to have more filters available on the home page then we would take the code route but this change should be enough to filter the list as you are looking for.
That’s what i believe I did (and tried again, as you’ll see) but it doesn’t seem to work. The only way I get the field to even be picked up is by using fs-queryparam-name, but that does no more than populate the input field in Properties – it doesn’t trigger the filter. Do you see anything that could be interfering with the script?
I think there may be a couple of issues as we generally do not need the Query Param Attribute to have this working.
Normally the text input is used to search for all available filter field with the * identifier. This makes the param look something like /properties?*=user+input which populates the filter input we then simulate user input to trigger the filtering with this snippet
If you want to try this approach then we can try removing the code and changing the filter identifier to * and renaming the input field to the same identifier.
We can achieve the same result using code, just check your element identifiers as there are multiple elements with the same id
Here is the code to create the ?*=user+input param
<!-- FOR SEARCH INPUT -- PUSH INTO FILTER FIELD -->
<script>
window.onload = () => {
const form = document.getElementById('filter-form');
const cityField = document.getElementById('name-2');
form.addEventListener('submit', (e) => {
e.preventDefault();
const cityValue = cityField.value;
const cityValueParam = cityValue ? cityValue.replaceAll(' ', '+') : '';
let url = '/properties?';
if (!cityValueParam) {
url = url;
} else {
if (cityValueParam) {
url += '?*=' + cityValueParam;
}
}
// console.log(url); // For testing
window.location.href = url; // Uncomment this line to redirect to the constructed URL
});
};
</script>
Luis my friend, I’m just not getting it, I’m sorry. Maybe I’m doing something backwards???
I added the “push” code to the Properties page.
I added the “FOR SEARCH INPUT” code to the home page.
But I still getting the same result (no data passed into the filter field).
I tried changing the ID for the receiving filter field, thinking maybe there was a duplicate ID. I tried removing the queryparam script from the global scripts thinking maybe it was interfering with your code. I tried putting the code in different spots on the page. I tried a bunch but am not even getting the variable into the filter field anymore. (my original problem was that the input text was showing up in the filter field, it just wasn’t filtering).
I feel terrible for the constant back & forth. I’m hoping you can tell me I made some silly mistake??
AHA! So I went back to using queryparam on the filter field, and it now works!!
BUT…
Any idea how I get the search bar input to populate the filter field on Properties page? I used the mirror script, which works great on the Properties page but obviously doesn’t carry thru from other pages.
Webflow was inserting whatever I typed as the “Name” of the text input field into the ID of the field. I assumed they have to be the same. But I renamed the Name of the search-input field “name” and it works.
