Skip to content

Commit 3d6be47

Browse files
kapilkashyapkapilkashyap
committed
Updated.
- The home page. Added explanation of the plugin properties.
1 parent caaaa55 commit 3d6be47

File tree

3 files changed

+100
-3
lines changed

3 files changed

+100
-3
lines changed

‎demos/assets/style.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ a.active { color: #808080; }
2020
.content-item-selected, .content-item:hover { border-left-color: #FF8533; }
2121

2222
table tr th { text-align: left; padding-left: 3px; }
23+
table tr th.property-heading { color: #E4E4F0; background-color: #0095FF; padding-right: 5px; font-weight: normal; }
2324
.text { font-family: verdana; font-size: 12px; }
2425
.input-form { width: 100%; }
2526
.input-row { vertical-align: top; padding: 2px 0; }

‎demos/home.html

Lines changed: 99 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,110 @@
66

77
<title>jQuery Filter JSON - Home</title>
88
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
9+
<script type="text/javascript" src="assets/prettify.js"></script>
10+
911
<link rel="stylesheet" type="text/css" href="assets/style.css" />
12+
<link rel="stylesheet" type="text/css" href="assets/prettify.css" />
1013
</head>
11-
<body>
14+
<body onload="prettyPrint();">
1215
<div class="marginTB5px">
1316
<div class="header">jQuery Filter JSON Plugin</div>
1417
<div class="marginTB5px explanation">
15-
The filterJson plugin is a utility which allows you to filter a JSON using a key (or property).
18+
This jQuery plugin is a utility that allows you to filter a JSON based on properties. You can also have a property/value match and only those
19+
property values that match the passed in value will be returned.<br/>
20+
However, you can filter the JSON based on various parameters such as startWith or checkContains, matchCase and can either choose to return the
21+
matched values or the parent object of the matched values. You even have the option of avoiding duplicates if any.<br/><br/>
22+
23+
Below is a basic usage:
24+
<pre class="prettyprint">
25+
$.fn.filterJson({ json object }, {
26+
property: ["prop1", "prop2", ... n],
27+
wrapper: true,
28+
value: "user one",
29+
checkContains: false,
30+
startsWith: true,
31+
matchCase: false,
32+
avoidDuplicates: true
33+
});
34+
</pre>
35+
<div class="downlaod-heading">Plugin Properties Explained</div>
36+
Before digging into each property of the plugin lets describe our sample JSON.
37+
<pre class="prettyprint">
38+
{
39+
{
40+
"id": 12345,
41+
"name": "User One",
42+
"email": "[email protected]"
43+
},{
44+
"id": 23456,
45+
"name": "User Two",
46+
"email": "[email protected]"
47+
},{
48+
"id": 34567,
49+
"name": "User Three",
50+
"email": "[email protected]"
51+
}
52+
.
53+
.
54+
.
55+
}
56+
</pre>
57+
<table>
58+
<tr class="input-row">
59+
<th class="property-heading">Property</th>
60+
<th class="property-heading">Type</th>
61+
<th class="property-heading">Default</th>
62+
<th class="property-heading">Description</th>
63+
</tr>
64+
<tr class="input-row">
65+
<td>property</td>
66+
<td>array</td>
67+
<td>null</td>
68+
<td>This options takes an array of the property or properties that you need to filter the JSON with. For the above sample JSON we can have three properties
69+
id, name and email. So you can have this value set as ["name"] or ["name", "email"]</td>
70+
</tr>
71+
<tr class="input-row">
72+
<td>wrapper</td>
73+
<td>boolean</td>
74+
<td>false</td>
75+
<td>If set to true, it will return an array of the parent object of the matched property else will return an array of value itself.
76+
For instance if we are filtering the above sample JSON with 'name' property and wrapper is set to true, then an array of all the Objects which
77+
have the 'name'property will be returned. If the wrapper is set to false, then an array of only the values of the property will be returned. For the above sample JSON
78+
["User One", "User Two", "User Three"] would be returned.</td>
79+
</tr>
80+
<tr class="input-row">
81+
<td>value</td>
82+
<td>string</td>
83+
<td>""</td>
84+
<td>An optional value passed to be matched with the value of the matched property value.</td>
85+
</tr>
86+
<tr class="input-row">
87+
<td>checkContains</td>
88+
<td>boolean</td>
89+
<td>false</td>
90+
<td>Setting this option to true will check if the matched property's value contains the passed in value. However, passing a value becomes mandatory for this to work.
91+
This option will be considered only if it is true and startsWith is not set to true.</td>
92+
</tr>
93+
<tr class="input-row">
94+
<td>startsWith</td>
95+
<td>boolean</td>
96+
<td>false</td>
97+
<td>Setting this option to true will check if the matched property's value starts with the passed in value. However, passing a value becomes mandatory for this to work.
98+
This options takes precedence over checkContains if it is set to true.</td>
99+
</tr>
100+
<tr class="input-row">
101+
<td>matchCase</td>
102+
<td>boolean</td>
103+
<td>false</td>
104+
<td>If set to true will perform case-sensitive search of values.</td>
105+
</tr>
106+
<tr class="input-row">
107+
<td>avoidDuplicates</td>
108+
<td>boolean</td>
109+
<td>false</td>
110+
<td>If set to true will avoid duplicate objects.</td>
111+
</tr>
112+
</table>
16113
</div>
17114
</div>
18115
</body>

‎demos/index.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
<body>
1313
<div class="topbar">
1414
<div class="primary">$( '#kapil-kashyap' )</div>
15-
<div><a href="mailto:[email protected]?Subject=Feedback: jQuery paginated drop down widget" target="_blank">[email protected]</a> / <a href="mailto:[email protected]?Subject=Feedback: jQuery paginated drop down widget" target="_blank">[email protected]</a></div>
1615
</div>
1716
<div id="left-navigation">
1817
<div class="content-item">&nbsp;<a href="#home">Home</a></div>

0 commit comments

Comments
 (0)