How to build a search that filters content based on text

Design help CMS
1

I am trying to build a search functionality that filters through cms and only shows those collections that have matching text.

Something similar to : Webflow integrations | Webflow University

Here is my public share link: LINK
(how to access public share link)

2

Webflow is using a third party search tool called SwiftType last I checked. You probably need to as well if you want control. You can restrict Webflow search to a collection(s) by excluding all other pages (each) from search indexing. That could get you close.

3

Thanks Jeff ! I will look into it.

Meanwhile, what I am doing is as follows :

  1. Created a page with CMS that I want as a result.
  2. Created an input field and javascript for filtering.
  3. When the user types something, the javascript “hides” those CMS content that doesn’t match with the input search.

My concern with this method is that the CMS is going to have around 400 items, is it feasible to it via this way ?

4

The issue is over all page load. Hidden items using the display property are still loaded. I had a similar requirement recently and ended up using a json file that was populated with all the data and scripting to handle type ahead searching. Algolia recently changed the pricing model making it possible to entertain its use on smaller projects.

5

If those cms items are not ecommerce products maybe you should try loading your search results with ajax (using the slug as a unique identifier and loading the result from the actual cms page).

6

They arent ecommerce items per se, but functionality is exactly the same.

Could you link to a resource that uses your method of using slug ?

7

That’s my biggest concern, at a given moment at max 20 items will be shown out of collection of 400+ items.

I will give a shot at Algolia, thanks Jeff!

8

You could try something in this spirit :

<script>
$(window).on('load', function() {
    $('.search-result-item').each(function(){
        var itemUrl = $("a", this).attr('href');
        //console.log(itemUrl);
        $(this).load(""+itemUrl+" #ajax-item");
    });
});
</script>

This type of logic can work with webflow’s search or algolia or whatever.
You use the search and configure it to contain the link or slug of the cms item page. And this script is used to replace the content on load of the result page with an actual item you designed inside webflow on the cms item page (the parent div can be hidden).

And if you want a simple solution and have spare bucks : https://www.jetboost.io/ works nicely

9

This solution is amazing! I will give it a try and keep you posted.

Thanks Dorian !