Streaming live at 10am (PST)

List / Page Section Search

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 the live page - https://www.origina.com/faq

Here’s the link to the Jquery plugin - http://vdw.github.io/HideSeek/
And the github page - https://github.com/vdw/HideSeek

And here’s a JSFiddle of it - https://jsfiddle.net/diarmuids/6y253pgz/

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 - http://vdw.github.io/HideSeek/

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

9 Likes

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!

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

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!

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

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!

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

1 Like

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!

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.

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.

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

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.