JavaScript Structured-Filter Plugin

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<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">GeeksforGeeks</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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<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">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>

chevron_right


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.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.