Filterable Multi-level Selector Plugin - jQuery Modal Selector

Modal Selector is a jQuery plugin for creating a filterable multi-level selector in a side modal where you can select items in a user-friendly manner.

Based on Bootstrap modal component and Font Awesome iconic font.

How to use it:

1. Load the necessary jQuery library, Bootstrap framework, and Font Awesome in the document.

<!-- Font Awesome -->
<link rel="stylesheet" href="/path/to/cdn/fontawesome.min.css" />
<!-- jQuery + Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Create a button to toggle the modal selector.

<button id="click" class="btn btn-primary" type="button" name="button">Click</button>

3. Download and load the Modal Selector plugin's files.

<link rel="stylesheet" href="modal-selector.min.css" />
<script src="modal-selector.min.js"></script>

4. Initialize the plugin on the toggle element and define your own item data as follows.

$("#click").ModalSelector({
  data: [
    {
      name: "JavaScript",
      id: 1,
      children: [
        {
          name: "jQuery",
          id: 11,
          children: [
            {
              name: "jQueryScript",
              id: 111
            }
          ]
        }
      ]
    },
    {
      name: "jQueryScriptNet",
      id: 2,
      children: [
        {
          name: "Popular",
          id: 22
        },
        {
          name: "Sliders",
          id: 23,
          children: [
            {
              name: "Carousel",
              id: 231
            },
            {
              name: "Slideshow",
              id: 232
            }
          ]
        },
        {
          name: "Featured",
          id: 24
        },
        {
          name: "Top Downloaded",
          id: 25
        }
      ]
    }
  ]
});

5. Or load data from an external data source.

$("#click").ModalSelector({
  url: '/path/to/data/'
});

6. Get the name & ID of the selected item.

$("#click").ModalSelector({
  onSelect: function(e, data, modal){
    console.log(data.name, data.id);
    modal.modal("hide");
  },
});

7. All possible plugin options.

$("#click").ModalSelector({
  url: null,
  data: null,
  nameProperty: "name",
  idProperty: "id",
  childrenProperty: "children",
  _: {
    id: Math.floor(Math.random()*10000),
    modalParent: "body"
  },
  localization: {
    search: "Search..."
  },
  icons: {
    search: "fas fa-search",
    parent: "fas fa-level-up-alt fa-rotate-90",
    child: "fas fa-play"
  },
  onSelect: null
});

---

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