Nov 6, 2019
White Arrow icon
Back to all Elements

Live search Anywhere with 'hideseek.js'

Embed a live search bar to search in any div container.

The Hideseek plugin is very light and simple to use. It is exactly what can make your page more friendly and help users find faster what they want.

First step is to create our hierarchy/structure in the page. For that we need:

  1. Search bar (input block)
  2. Container to search in

The search bar can be added manually with code in an HTML embed widget, or use a form block and delete all other fields and buttons (leave only one input field). In both cases, add an ID to the search bar.

The container should have a classname or an ID.

<input id="search" placeholder="search for anything" type="text" name="">

Copy

2nd step, add the plugin script source (I use CDN, you can download from here and upload to your server) before the </body> tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/hideseek/0.8.0/jquery.hideseek.min.js"></script>

Copy

Last step is to initiate the plugin with some configurations.

The '#search' is the ID of the search bar. This is how the plugin knows that when we type in this specific search bar, it should search the container. The '.wrapping-div' is the classname of the container to search in.

'nodata' is a VERY SIMPLE empty state. Only text, which can be styled by targeting the '.no-results' classname. 'highlight: true' highlights the search term in the results (could also be styled by targeting the '.highlight' classname).

<script>

 $(document).ready(function() {

   $('#search').hideseek({

     list: '.wrapping-div',

     nodata: 'Ooops... Nothing here...',

     highlight: true,

   });

 })

</script>

Copy

Preview:

browser mockup
Share:
Heart icon

Destin's Youtube channel Smarter Every Day is one of my favourite places on the web.

Might also interest you:

3d Video Slider (swiper.js)

Cloneable
CMS
JavaScript

A 3d slider with video items, plays and pauses on click & slide change.

Read more
Blue arrow iconWhite Arrow icon

Webflow Dashboard Workspaces Hack

Webflow UI Hack
Code
CSS

Convert the Workspaces dropdown to an open sidebar with custom order.

Read more
Blue arrow iconWhite Arrow icon

Glossary

Cloneable
JavaScript
CMS

A clonable for creating an Alphabetical glossary

Read more
Blue arrow iconWhite Arrow icon