Hi all,
Our jewelry store client’s Webflow website contains a page featuring an iframe from a major watch brand…which means their content isn’t searchable through our on-site Webflow search bar. They realize that, so they’ve made this request: they want any on-site search of specific words to automatically jump you to their page (not to our internal search results page) when someone searches for it in the Webflow search bar.
For example, if you type “Watch Brand” into our search bar and hit enter, hitting enter should take you directly to the Watch Brand’s page, not to a search results page.
They have about 16 keywords that they’d like this functionality activated for. Is there a way to write a special function where the Webflow Search bar knows that if any of these 16 specific words are entered, it takes users directly to the Watch Brand’s page instead of to a general search results page?
Thank you for the help!
Nick
Hey,
I tried to hack together a Javascript solution for this problem, and came up with something.
The script gets the users input and compares it to values in an array of valid keywords, in your case the name of the watch brands.
If the users input matches with any of the values in the keywords-array, the default “search behaviour” will be prevented, and it will try to match the search with a page of the same index in the “pages” array.
In this case, a search starting with “rolex” or “Rolex” will send the user to the page “/test”, a search starting with “omega” or “Omega” will send the user to the page “/test2” and so on.
So feel free to add the brands to the “keywords”-array and the pages corresponding to the keyword to the “pages”-array.
I could probably tweak this further a bit. Just let me know 
<script>
// Array of keywords to be matched
const keywords = [
'rolex',
'omega',
'blancpain'
];
const pages = [
'test',
'test2',
'test3'
];
// The search input & button
const searchBtn = document.querySelector('.search-btn');
const searchInput = document.querySelector('.search-box');
// Gets the value of the search input
searchInput.addEventListener('input', (e) => {
let input = e.target.value.toLowerCase();
// Checks if what the user is searching for exists in the array
if (keywords.includes(input)) {
searchBtn.addEventListener('click', (e) => {
e.preventDefault();
//location.href = `/${input}`;
checkInput(input);
});
}
});
function checkInput (val) {
console.log(val);
let i = 0;
keywords.forEach(element => {
if ( element.toLowerCase().indexOf( val ) !== -1 ) {
console.log('match');
location.href = `/${pages[i]}`
}
i++;
});
}
</script>
Forgot to add my example using the code:
https://search-test-95fb5b.webflow.io/
Try searching for rolex and it should take you to the /test page.
Thank you so much! We’ll test it out on our end and see what happens!
Hey, I was trying to do this as well and added the script to the custom code in the project settings and it did not work and then I tried adding .search-btn and searchBtn as the ID for those specific fields. I feel like I am not putting something in the correct place. Could you give me an idea of what the steps would be to put make this function.
Thanks.
Hey,
if you’re using the exact code I posted, you should use “search-btn” and “search-box” as class names for the button and input instead of ID’s
Hey Thanks for the code. I tried adding to my website but I’m not sure where to place the code? Also I have a total of 16 keywords but I want them all to go to the same page. Do I need to list the rolex page I want them to go to for each keyword or just list it once? Last, the test website you made doesn’t work. Can you fix it so I can check it out? Thanks!
Hey,
I updated the script and created a small test page with an explanation on how to use it. You can check it out here:
https://robin-g-experiments.webflow.io/experiments/direct-search-js
Thank you so much! I’ll let you know if I have any issues.