<link href=”structured-filter.css” rel=”stylesheet”type=”text/css”/>
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.
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.
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.
- jQuery | Page Piling Plugin
- Step by step guide to make your first Wordpress Plugin
- jQuery | Mask Plugin
- How to create a jQuery plugin with methods?
- jQuery | Multiscroll Plugin
- jQuery | DrawSVG Plugin
- jQuery | Product Tour Plugin
- jQuery | Alertify Plugin
- jQuery | Flickerplate Plugin
- jQuery | menu-aim plugin
- jQuery | Tagsort Plugin
- jQuery | RowGrid Plugin
- jQuery | Filer Plugin
- jQuery | Logos Distort Plugin
- jQuery | Flipping Gallery Plugin
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.