FancyFilter.js/example.html at master · bliind/FancyFilter.js · GitHub

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<html>
    <head>
        <title>FancyFilter.js Example</title>
    </head>
    <body>
        <input id="ffInput">
        <div id="peopleCount">0</div>
        <table id="people">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Gender</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Daenerys Targaryen</td>
                    <td>Female</td>
                </tr>
                <tr>
                    <td>Joffrey Baratheon</td>
                    <td>Male</td>
                </tr>
                <tr>
                    <td>Tyrion Lannister</td>
                    <td>Male</td>
                </tr>
                <tr>
                    <td>Sansa Stark</td>
                    <td>Female</td>
                </tr>
                <tr>
                    <td>Eddard Stark</td>
                    <td>Male</td>
                </tr>
                <tr>
                    <td>Cersei Lannister</td>
                    <td>Female</td>
                </tr>
                <tr>
                    <td>Arya Stark</td>
                    <td>Female</td>
                </tr>
                <tr>
                    <td>Tywin Lannister</td>
                    <td>Male</td>
                </tr>
                <tr>
                    <td>Brienne of Tarth</td>
                    <td>Female</td>
                </tr>
                <tr>
                    <td>Robert Baratheon</td>
                    <td>Male</td>
                </tr>
                <tr>
                    <td>Jaime Lannister</td>
                    <td>Male</td>
                </tr>
                <tr>
                    <td>Margaery Tyrell</td>
                    <td>Female</td>
                </tr>
                <tr>
                    <td>Khal Drogo</td>
                    <td>Male</td>
                </tr>
                <tr>
                    <td>Jon Snow</td>
                    <td>Male</td>
                </tr>
                <tr>
                    <td>Viserys Targaryen</td>
                    <td>Male</td>
                </tr>
                <tr>
                    <td>Jorah Mormont</td>
                    <td>Male</td>
                </tr>
                <tr>
                    <td>Davos Seaworth</td>
                    <td>Male</td>
                </tr>
                <tr>
                    <td>Petyr Baelish</td>
                    <td>Male</td>
                </tr>
                <tr>
                    <td>Renly Baratheon</td>
                    <td>Male</td>
                </tr>
                <tr>
                    <td>Olenna Tyrell</td>
                    <td>Female</td>
                </tr>
            </tbody>
        </table>
        <div id="housesCount">0</div>
        <ul id="houses">
            <li>House Baratheon</li>
            <li>House Bolton</li>
            <li>House Florent</li>
            <li>House Lannister</li>
            <li>House Martell</li>
            <li>House Redwyne</li>
            <li>House Stark</li>
            <li>House Umber</li>
            <li>House Targaryen</li>
            <li>House Tully</li>
        </ul>
        <script src="FancyFilter.js"></script>
        <script>
            var ffPeople = new FancyFilter();
            ffPeople.setInputEvent('#ffInput');
            ffPeople.subjectSelector = '#people tbody tr';
            ffPeople.columnHeaderSelector = '#people thead th';
            ffPeople.resultCountOutputSelector = '#peopleCount';
            ffPeople.filter();

            var ffHouses = new FancyFilter();
            ffHouses.setInputEvent('#ffInput');
            ffHouses.subjectSelector = '#houses li';
            ffHouses.resultCountOutputSelector = '#housesCount';
            ffHouses.filter();

        </script>
    </body>
</html>