<
html
>
<
head
>
<
title
>Structured-Filter Plugin</
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
media
=
"all"
href
=
<
link
rel
=
"stylesheet"
type
=
"text/css"
media
=
"all"
href
=
"structured-filter.css"
>
<
script
type
=
"text/javascript"
src
=
</
script
>
<
script
type
=
"text/javascript"
src
=
</
script
>
<
script
type
=
"text/javascript"
src
=
"structured-filter.min.js"
>
</
script
>
</
head
>
<
body
>
<
h2
style
=
"color:green"
>GeeksforGeeks</
h2
>
<
b
>jQuery UI structured filter</
b
>
<
br
><
br
>
<
div
id
=
"myfilterID"
style
=
"width:700px"
>
</
div
>
<
br
><
br
>
<
div
id
=
"showUrlId"
class
=
"urlClass"
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
// Attach the structured-filter
// to the given element
$("#myfilterID").structFilter({
fields: [
{ id: "firstname", type: "text", label: "Firstname" },
{ id: "age", type: "number", label: "Age" },
{ id: "bday", type: "date", label: "Birthday" },
{ id: "category", type: "list", label: "Category",
list: [
{ id: "1", label: "Family" },
{ id: "2", label: "Friends" },
{ id: "3", label: "Business" },
{ id: "4", label: "Relatives" },
{ id: "5", label: "Other" }
]
}
],
buttonLabels: true,
// Date is in "mm/dd/yy" format
dateFormat: "d M,y",
submitButton: true,
});
var output;
// Event is triggered when the submit
// button is clicked
$("#myfilterID").on("submit.search",
function (event) {
output =
$("#myfilterID").structFilter("valUrl");
$("#showUrlId").text(output);
});
$("#myfilterID").structFilter("clear");
});
</
script
>
</
div
>
</
body
>
</
html
>