In this article, we will learn how to implement a general web-based user interface for structured search filter queries using the JavaScript Structured-Filter plugin. This plugin helps in creating search conditions with the widgets provided by the UI. The examples that can , getting the birthday after some date, a rate greater than 200 and so on.
Note: Please download the JavaScript Structured-Filter plugin in the working folder and include the required files in the head section of your HTML code.
<link href=”
http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css” rel=”stylesheet”type=”text/css”/><link href=”structured-filter.css” rel=”stylesheet”type=”text/css”/>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.min.js”></script>
<script src=”structured-filter.min.js”></script>
Example 1: The following example demonstrates the Structured-Filter plugin with some of the fields like “Cuisine name”, “Price” and “Category”. The “Category” field is of type “list” which is a collection of categories like “Main course”, “Starters”, “Desert” used in the search conditions. Refer the below output images for better understanding.
HTML
<html> <head> <title>Structured-Filter Plugin</title> <!-- Include the stylesheet for jQuery UI --> <link rel="stylesheet" type="text/css" media="all" href= <!-- Include the stylesheet for Structured-Filter --> <link rel="stylesheet" type="text/css" media="all" href="structured-filter.css" > <!-- Include jQuery --> <script type="text/javascript" src= </script> <!-- Include jQuery UI --> <script type="text/javascript" src= </script> <!-- Include the Structured-Filter --> <script type="text/javascript" src="structured-filter.min.js" > </script> </head> <body> <h2 style="color:green">neveropen</h2> <b>jQuery UI structured filter</b> <br><br> <div id="filterId" style="width:600px"> </div> <script type="text/javascript"> $(document).ready(function () { // Attach the structured-filter // to the given element $("#filterId").structFilter({ fields: [ { id: "name", type: "text", label: "Cuisine name" }, { id: "price", type: "number", label: "Price" }, { id: "category", type: "list", label: "Category", list: [ { id: "1", label: "Main course" }, { id: "2", label: "Starters" }, { id: "3", label: "Snacks" }, { id: "4", label: "Dessert" }, { id: "5", label: "Other" } ] } ] }); }); </script> </body> </html> |
Output: The following output shows the screen before the search filter query UI execution.
The following output shows the filter query UI for the “Cuisine name” field having type “text”.
The following output shows the filter query UI for the “Price” field having type “number”.
This demonstrates the execution of the query UI feature.
The following shows the final output of the above code.
Example 2: The following example demonstrates other option settings and event trigger function. The code shows the URL value of the search condition query when the user clicks the “Submit” button.
html
<html> <head> <title>Structured-Filter Plugin</title> <!-- Include the stylesheet for jQuery UI --> <link rel="stylesheet" type="text/css" media="all" href= <!-- Include the stylesheet for Structured-Filter --> <link rel="stylesheet" type="text/css" media="all" href="structured-filter.css" > <!-- Include jQuery --> <script type="text/javascript" src= </script> <!-- Include jQuery UI --> <script type="text/javascript" src= </script> <!-- Include the Structured-Filter --> <script type="text/javascript" src="structured-filter.min.js" > </script> </head> <body> <h2 style="color:green">neveropen</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> |
Output: The following output shows the screen before execution.
The following shows the final output.
The following screen shows the screen after setting data options.
