forked from Naereen/StrapDown.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example7.html
111 lines (80 loc) · 7.26 KB
/
example7.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html><html><head><meta charset="utf-8"/><title>Searching on a Markdown table?</title></head><body><xmp>
<ul class="pager">
<li class="previous"><a href="example6.html">← Previous example</a></li>
<li><a href="index.html">Index</a></li>
<li class="next disabled"><a href="#">(Last example)</a></li>
</ul>
# Example of how to search on a *HTML-table* written in Markdown
> [This previous example](example6.html) is a *StrapDown*-flavored HTML page is a demo of *how to write a table with Markdown*, and how a table will be (nicely) rendered by StrapDown.js.
#### Some help? (about that searching feature)
> The code I used is a [**jQuery**](https://www.jquery.com/) *plug-in*, called [QuickSearch](http://deuxhuithuit.github.io/quicksearch/). More detail can be found on [its documentation](http://deuxhuithuit.github.io/quicksearch/).
---
## Searching on a Markdown table?
> More details about the syntax for Markdown tables can be found on the **GitHub Flavored Markdown** document : [help.github.com/articles/github-flavored-markdown/#tables](https://help.github.com/articles/github-flavored-markdown/#tables).
The goal of this demo is to show how easy (and pretty) it is to add a search feature to any table, written in Markdown (or HTML).
That search feature is working **incredibly well**, on the box below, if you start typing "Su", it's already enough to select only the **Superman** line!
---
<div class="pull-right">
<h3>Search on that table?</h3>
<p>Thanks to the <a href="http://deuxhuithuit.github.io/quicksearch/">QuickSearch</a> <a href="https://www.jQuery.com/"><strong>jQuery</strong></a> <em>plug-in</em>.</p>
<form><input class="form-control input-lg" type="text" name="search" value="" id="id_search" placeholder="Search on that table" autofocus />
</form></div>
# A partial list of the [Justice League of America](https://en.wikipedia.org/wiki/Justice_League)
Here is an example of a table, displaying some *super heroes* ^^ <br>
(fake picture, fake email address, etc).
| Number | Name | Secret Name! | Organization | Gender | Email Address | Photo | *Awesomeness* |
| :----- |:----:|:------------:|:------------:|:------:|:-------------:| -----:| ------------: |
| 01 | **Wonder Woman** | *Secret!* | <abbr title="Juctice League of America!! Osef, I am French ;)">JLoA</abbr> | Female | [[email protected]](mailto:[email protected]) | | *Really awesome* |
| 02 | **Superman** | *Clark Kent* | <abbr title="Juctice League of America!! Osef, I am French ;)">JLoA</abbr> | Male | [[email protected]](mailto:[email protected]) | | *OK* |
| 03 | **Batman** | *Bruce Wayne* | <abbr title="Juctice League of America!! Osef, I am French ;)">JLoA</abbr> | Male | [[email protected]](mailto:[email protected]) | | *Wonderful* |
| 04 | **Green Lantern** | *Secret!* | <abbr title="Juctice League of America!! Osef, I am French ;)">JLoA</abbr> | Male | [[email protected]](mailto:[email protected]) | | *OK* |
| 05 | **AwkGirl** | *Too lazy to [look for](https://www.duckduckgo.com/?q=AwkGirl+real+name) it* ([seriously](https://en.wikipedia.org/wiki/Hawkgirl#Fictional_character_biography)) | <abbr title="Juctice League of America!! Osef, I am French ;)">JLoA</abbr> | Female | [[email protected]](mailto:[email protected]) | | *Not great* |
> *Hint:* these emails addresses are really secret, keep them for yourself, but most importantly, keep them away from super villains! (Seriously: **pictures and emails they are fake!**)
> Thanks to the *awesome* [RandomUser.me](https://randomuser.me/) for providing **fake** profile pictures for our super-heroes! (And *free* and *open* to use pictures, thanks guys!)
---
# How to do it?
Three steps:
## 1) Add the search bar somewhere in your page
One simple line of HTML code:
```html
<form><input type="text" name="search" value="" id="id_search" placeholder="Search on that table" autofocus /></form>
```
If you want to display on the right of the page (as I did above), let's use a cool [Bootstrap CSS feature](http://bootswatch.com/united):
```html
<div class="pull-right">
<h3>Search on that table?</h3>
<form><input type="text" name="search" value="" id="id_search" placeholder="Search on that table" autofocus />
</form></div>
```
## 2) Load jQuery and the QuickSearch plug-in
At the **end** of your [StrapDown.js](http://lbesson.bitbucket.org/md/index.html) document, include the `jquery` javascript file (in my case `jquery.js`, but could be `jquery.min.js`), and the quicksearch plug-in (`jquery.quicksearch.min.js` in my case), with the good path.
In my example, I used the version that I stored on [my website](http://perso.crans.org/besson/), but you can use the **jQuery** CDN, or host them yourself on your site.
What I did here was just these two simple lines.
Be cautious to do it at *the end* of the document, **after the closing `xmp` tag** (or the `textarea` tag):
```html
<script type="text/javascript" src="http://perso.crans.org/besson/_static/jquery.js"></script>
<script type="text/javascript" src="http://perso.crans.org/besson/_static/jquery.quicksearch.min.js"></script>
```
## 3) Initialize the search feature
Finally, after loading the two scripts (step 2), one line of JavaScript in enough to conclude, by loading the QuickSearch plug-in, and initializing it:
```html
<script type="text/javascript" defer async>$('input#id_search').quicksearch('table tbody tr');</script>
```
> More explanations? This Javascript line has three parts:
> 1. `$('input#id_search')` is using jQuery (the `$()` fonction) to select the DOM element of type `input` with `id=id_search` (id because of the `#`, it would be a class if `.`, like `div.navbar`),
> 2. `.quicksearch(...)` is calling the `quicksearch` fonction (available because QuickSearch has been registered as a jQuery plug-in), using it for that DOM element (the input search bar),
> 3. and finally we apply that fonction with the argument `'table tbody tr'`, which means that we initialize QuickSearch to look for all the `<table>` elements, only on their children `<tbody>` (content of the table), and only on the different lines (`<tr>`).
---
## End of the example
That's all for today! [Go back to StrapDown.js main page](index.html)?
---
<ul class="pager">
<li class="previous"><a href="example6.html">← Previous example</a></li>
<li><a href="index.html">Index</a></li>
<li class="next disabled"><a href="#">(Last example)</a></li>
</ul>
</xmp><script type="text/javascript" src="strapdown.min.js?theme=united"></script>
<script type="text/javascript" src="http://perso.crans.org/besson/_static/jquery.js"></script>
<script type="text/javascript" src="http://perso.crans.org/besson/_static/jquery.quicksearch.min.js"></script>
<script type="text/javascript" defer async>$('input#id_search').quicksearch('table tbody tr');</script>
</body></html>