diff --git a/content/websites/patterns/live-filter/layout.html b/content/websites/patterns/live-filter/layout.html index 727f7444a587579b49a7dae6b908c68edb298e0c..a09726dbd4d7f2cb9f4446187c4513e3b403c028 100644 --- a/content/websites/patterns/live-filter/layout.html +++ b/content/websites/patterns/live-filter/layout.html @@ -1,14 +1,10 @@ {{#markdown}} -If you have mutliple rows of data you'd like the use to be able to quickly sift through (perhaps combining with table sorting) we bundle the aptly named <a href="https://github.com/mikemerritt/LiveFilter">LiveFilter plugin</a>. It is not loaded by default and you'll need to load <code>LiveFilter/js/jquery.liveFilter.js</code>. - -There are many such JS plugins available, but we found this one to work well and do just enough and <a href="https://github.com/mikemerritt/LiveFilter/pull/14/commits/6f6023d108d4b3a70157392f3231e245610dcc72">easily modldable to our needs</a>. - -#### Bonus notes -<ul> - <li>The sample <code>input</code> has had <code>.clearable</code> added so a clear icon shows after text has been added by the user.</li> - <li>We hint about the action that will be performed by placing a search icon to the left of the box, it does not however act as a button as the form is automatically updated on keypress.</li> -</ul> +- To use the <a href="https://github.com/mikemerritt/LiveFilter">LiveFilter plugin</a> load [`LiveFilter/js/jquery.liveFilter.js`](https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/libraries/LiveFilter/js/jquery.liveFilter.js). +- Look at the sample JS below for usage guidance. +- The example <code>input</code> has a <code>.clearable</code> class. Once a user types, this adds a clear icon at the right side. +- We hint about the action that will be performed by placing a search icon to the left of the box, it does not however act as a button as the form is automatically updated on keypress. +- There are many such JS plugins available, but we found this one to work well and do just enough and [easily modldable to our needs](https://github.com/mikemerritt/LiveFilter/pull/14/commits/6f6023d108d4b3a70157392f3231e245610dcc72). <div class="row"><div class="column"> {{> live-filter}} diff --git a/content/websites/patterns/live-filter/live-filter.html b/content/websites/patterns/live-filter/live-filter.html index 56c4f568732ffa5026e2ecbaaeb10cfc070f0f17..2de677609ef8bfe8c762be22978ebbd7a68cde2c 100644 --- a/content/websites/patterns/live-filter/live-filter.html +++ b/content/websites/patterns/live-filter/live-filter.html @@ -1,7 +1,7 @@ <!-- Include live filtering --> <!-- Note that we've loaded this with "defer", this technique may not be appropriate for your uses. --> <!-- If not, load this JS after jQuery. --> -<script defer="defer" src="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/libraries/LiveFilter/js/jquery.liveFilter.js"></script> +<script defer="defer" src="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/libraries/LiveFilter/js/jquery.liveFilter.js"></script> <div id="livefilterdemo" class=""> <h3>Some content to scan</h3> diff --git a/content/websites/patterns/live-filter/live-filter.js b/content/websites/patterns/live-filter/live-filter.js index 93e330176cdcfa6c8f717c83ff6ffa037bcc34f0..a1e156f9aad0c1421fbebe3f1cff7e5d488b1286 100644 --- a/content/websites/patterns/live-filter/live-filter.js +++ b/content/websites/patterns/live-filter/live-filter.js @@ -1,9 +1,12 @@ window.addEventListener('load',function() { $(document).ready(function() { $('#livefilterdemo').liveFilter({ + delay: 200, // how long between keystroke and filter + analyticsLogging: false, // log to google analytics through foundationExtendEBI.js fitlerTargetCustomDiv: 'div.live-filter-target-granularity', defaultText: 'Type to filter these paper references', noMatches: '<p>No matching papers found.</p><a class="button" href="#">You could add a link to advanced search</a> ' + // for further plugin option guidance, see: https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/libraries/LiveFilter/js/jquery.liveFilter.js }); }); }); diff --git a/content/websites/patterns/live-filter/live-filter.png b/content/websites/patterns/live-filter/live-filter.png index 7ed9b063821569a79eaaf98d403b7f1112ca3fa8..d2b588c6c23f4123ee016bf37886cdae027f2b4f 100644 Binary files a/content/websites/patterns/live-filter/live-filter.png and b/content/websites/patterns/live-filter/live-filter.png differ diff --git a/content/websites/patterns/live-filter/live-filter.yml b/content/websites/patterns/live-filter/live-filter.yml index 30d92dc641481924004ce79f90da82910edad15d..4e89af3d618bc9c0d7efb34cec6481e9b7d837c9 100644 --- a/content/websites/patterns/live-filter/live-filter.yml +++ b/content/websites/patterns/live-filter/live-filter.yml @@ -3,7 +3,7 @@ tags: - typography - search category: forms -description: If you have mutliple rows of data you'd like the use to be able to quickly sift through (perhaps combining with table sorting) we bundle the aptly named LiveFilter plugin +description: If you have mutliple rows of data you'd like the use to be able to quickly sift through (perhaps combining with table sorting) we bundle the aptly named LiveFilter plugin. versions: - 1.1.0, 1.2.0 author: