Skip to content
Snippets Groups Projects
Commit 618e85b2 authored by khawkins98's avatar khawkins98
Browse files

Document ability to log livefilter search

For https://github.com/ebiwd/EBI-Framework/issues/123
parent 8f6625f2
No related branches found
No related tags found
No related merge requests found
{{#markdown}} {{#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>. - 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.
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>. - 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.
#### Bonus notes - 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).
<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>
<div class="row"><div class="column"> <div class="row"><div class="column">
{{> live-filter}} {{> live-filter}}
......
<!-- Include live filtering --> <!-- Include live filtering -->
<!-- Note that we've loaded this with "defer", this technique may not be appropriate for your uses. --> <!-- Note that we've loaded this with "defer", this technique may not be appropriate for your uses. -->
<!-- If not, load this JS after jQuery. --> <!-- 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=""> <div id="livefilterdemo" class="">
<h3>Some content to scan</h3> <h3>Some content to scan</h3>
......
window.addEventListener('load',function() { window.addEventListener('load',function() {
$(document).ready(function() { $(document).ready(function() {
$('#livefilterdemo').liveFilter({ $('#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', fitlerTargetCustomDiv: 'div.live-filter-target-granularity',
defaultText: 'Type to filter these paper references', 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> ' 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
}); });
}); });
}); });
content/websites/patterns/live-filter/live-filter.png

54.4 KiB | W: | H:

content/websites/patterns/live-filter/live-filter.png

23.2 KiB | W: | H:

content/websites/patterns/live-filter/live-filter.png
content/websites/patterns/live-filter/live-filter.png
content/websites/patterns/live-filter/live-filter.png
content/websites/patterns/live-filter/live-filter.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -3,7 +3,7 @@ tags: ...@@ -3,7 +3,7 @@ tags:
- typography - typography
- search - search
category: forms 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: versions:
- 1.1.0, 1.2.0 - 1.1.0, 1.2.0
author: author:
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment