User-friendly Cascading Menu For Input Field - jQuery Leet Cascader

Cascading menu, also called "multi-level dropdown", allows you to present a multi-level hierarchy of information in a compact and organized way. This saves the user from having to perform another action to get the information he/she is looking for. It's one of the most efficient ways to arrange information hierarchically.

Experienced web developers understand the importance of developing sites for the end users, not for themselves. Site that include straightforward flows, easy-to-use navigation structure, and a user-friendly feedback tool set up can assist enhance web site involvement — so when a person visits your website, they get in touch with an individual right away, as well as complete their request effectively. The Leet Cascader plugin offers a different solution to producing user friendly input fields.

Leet Cascader is a small and fast jQuery plugin that attaches a dynamic cascading menu to the normal input field, where your users can select hierarchical data from a multi-level dropdown menu. It is a great alternative to the native <select> element and provides a better experience when you have some preset hierarchical data for users to choose from. Works perfectly with the latest Bootstrap 5 framework.

How to use it:

1. To use this plugin, include the following JavaScript and CSS files on the page.

<!-- jQuery Is REQUIRED -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

<!-- jQuery Leet Cascader Plugin Files --> 
<link rel="stylesheet" href="/path/to/css/cascader.css" />
<script src="/path/to/src/assets/js/cascader.js"></script>

<!-- Required For Submenu Indicator --> 
<link rel="stylesheet" href="/path/to/cdn/font-awesome/all.min.css">

<!-- Bootstrap Is OPTIONAL -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />

2. Define your data tree consist of id and title and subarray as Children[].

var myData = [{
    "id": 1,
    "title": "Electronics",
    "children": [{
      "id": 2,
      "title": "Tvs",
      "children": [{
        "id": 9,
        "title": "Led",
      }]
    }, {
    "id": 5,
    "title": "Monitors",
    "children": [
    ]
    }]
    }, {
    "id": 6,
    "title": "Surf Board",
    "children": [{
      "id": 7,
      "title": "Plastic",
      "children": [
      ]
    }, {
      "id": 8,
      "title": "Wood",
      "children": [{
        "id": 10,
        "title": "Main",
      }]
    }]
}];

3. Initialize the plugin and attach the Cascading Menu to the input field you specify.

<input type="text" id="example" name="category" class="cascader" />

$(document).ready(function() {
  cascader_init('.cascader', myData);
});

---

This awesome jQuery plugin is developed by usama-tariq1. For more Advanced Usages, please check the demo page or visit the official website.