How to Webflow: Instant, on-page search

Community resources Webflow Tips
1

Here’s an on-page search trick that might be useful for job boards, ecommerce pages or even blogs.

2 Likes
2

@PixelGeek, rather than have the search results just instantly on display before search, is there a way to have them hidden first, having it only appear when searched in the input box.

is there an addition code that could be added to achieve this?

this is the code im currently working with:

$(“.page-search”).on(“keyup”, function() {
var v = $(this).val();
$(“.results”).removeClass(“results”);
$(“.noresults”).removeClass(“noresults”);
$(“.team-member”).each(function() {
if (v != “” && $(this).text().search(new RegExp(v, ‘gi’)) != -1) {
$(this).addClass(“results”);
} else if (v != “” && $(this).text().search(v) != 1) {
$(this).addClass(“noresults”);
}
});
});