List / Page Section Search

Community resources Webflow Tips
1

Hey,

I’ve just implemented a Jquery plugin called HideSeek to give live search results on a page for a list of items. It’s pretty simple.

Here’s a JSFiddle of it - HideSeek Search - Webflow - JSFiddle - Code Playground

Here’s the link to the Jquery plugin - HideSeek jQuery plugin | A simple, yet customizable live search jQuery plugin
And the github page - GitHub - vdw/HideSeek: A simple, mobile-friendly, yet customizable quick/live search jQuery plugin.

To get it working, I added the following custom code in the footer:

Custom Code

<script type="text/javascript" src="https://rawgit.com/vdw/HideSeek/master/jquery.hideseek.min.js"></script>

<script>
$(document).ready(function() {
	$('#faq-search').hideseek();
})
</script>

Searchable List

  • The items to be searched are contained within a div with a class “faq-list-list” i.e.
<div class="faq-list-list">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  </div>

Input Field

  • I dragged in an input field by holding down alt + dragging it onto the canvas.
  • I gave this input field an id of “faq-search”.
  • I gave this input an attribute of name “data-list” and value “.faq-list-list”
    image

There are lots more cusomtisations which can be made. See the plugin demo page for examples - HideSeek jQuery plugin | A simple, yet customizable live search jQuery plugin

I hope that makes sense. Any questions, just ask.

9 Likes
2

Hi @Diarmuid_Sexton - thanks for taking the time to write this out. It is currently the solution I am looking for. I did have one quick question:

You mentioned that you dragged an input field into the site, but input fields can only be put inside of forms. I didn’t see you mention anything about forms, so it makes me think I am not following along correctly. Can you elaborate on how you did this?

Thanks again!

3

You can drag any form element by holding alt + dragging (that’s on windows - on mac, it might be command + drag)

Let me know if that helps

1 Like
4

Thank you @Diarmuid_Sexton. I was trying command + dragging in the input field, and it ended up being option + drag on my OS.

I believe I followed everything you shared correctly, but I still have not been able to get the content to sort. Do you mind taking a look to see if you find anything out of place? I would really appreciate the help.

Here is my share link. It is under my FAQ page.

Thanks!

5

Sorry, I can’t right now. If I get the chance next week, I will.

6

Sounds good, thank you!

Until then, @PixelGeek is there any help you can provide here? I am trying to implement what Diarmuid suggested, and I believe I followed all instructions. Perhaps there is something missing? My share link is in the previous message.

Thank you for any help you can provide!

7

I was able to figure it out; it was an issue on my end. Thanks again for posting this @Diarmuid_Sexton!

1 Like
8

Hi @Diarmuid_Sexton, thans for the tutorial! I followed all your steps, but unfortunately I can’t recreate it. A shame, because it seems like it should be exactly what I need! Do you have any idea what I did wrong? My share link is https://preview.webflow.com/preview/privacynexus?utm_source=privacynexus&preview=05a3fcf1d244abb527e3feb499d68be4, and it’s on the Frequently Asked Questions (FAQ)-en page.

Thanks in advance!

9

I successfully implemented this into my project but I’m wondering if there’s a way to make this work on a paginated CMS collection? I have a paginated collection and I want the hideseek to search every page, currently it only searches the live page.

10

Sorry, no there isn’t, not with pagination.

There might be a workaround where you list all the CMS items on the page - hide them - then show them once the user starts typing in the search box - i.e. (show the search results) - and hide the paginated list.

11

Stunning site, Tessa! I assume you created it as part of a team?

12

Hi Dan, thanks for the compliment! I made it as part of a small team, but I was the only designer. But I didn’t design it from scratch; a big part of it was copied of the previous version of the website, that was built without Webflow.

13

Since using text fields outsite of forms has been depricated by Webflow, does this still work? Can I use a form block with a text field inside?

14

Hi @Pconte,

Yes, I think you should be able to use a regular form element and just hide or delete the submit button.

Let me know if that works for you.

15

Hi @Diarmuid_Sexton,

Thanks for the quick reply. I am currently attempting to use a regular form element with deleted submit button but it’s not working for me. I followed all of your steps to my knowledge.

If you want to take a quick look at my site here is my preview link:
(It is on the second page “preview account”)

Preview Link

16

You don’t have the class=“faq-list-list” on the right item - you need to have that where you have “Collection List 4” - the collection list element that wraps all the collection items that you want to filter.

17

@Diarmuid_Sexton thanks for the help! It works perfectly now.