Cascading Autocomplete Dropdown In JavaScript – AutoCompleTree

Preview:

Description:

A pure JavaScript autocomplete plugin that enables the user to select items from a cascading autocomplete dropdown just like a hierarchical tree.

How to use it:

Import the AutoCompleTree’s JavaScript and CSS files.

<link rel="stylesheet" href="/autocompletree.min.css">
<script src="/autocompletree.js"></script>

Define your data in a JSON file.

// movies.json
{
  "Movies": {
    "Top Rated":{
      "Watched":{
        "2000s": {
          "Action": {
            "The Dark Knight": true,
            "Sicario": false,
            "Inception": true
          },
          "Drama": {
            "City of God": true,
            "Interstellar": true
          }
        },
        "1990s": {
          "Action": {
            "Pulp Fiction": true
          }
                },
                "1980s": false,
                "1970s": false,
                "1960s": false
      },
      "Watch List":{
        "2000s": {
          "Action": {
            "Snatch": true,
            "Batman Begins": true
          },
          "Drama": {
            "The Hunt":true,
            "A Separation":true
          }
        },
        "1990s": {
          "Action": {
            "Unforgiven": true
          }
        }
      }
    },
    "In Theaters":{
      "Action": {
        "Jurassic World" : true,
        "Ocean's 8": true
      },
      "Drama": {
        "Boundaries":true
      },
      "Comedy": {
        "Incredibles 2":true
      }
    },
    "Coming Soon":{
      "2018": {
        "Action": {
          "Sicario":true,
          "The First Purge":true
        }
      },
      "2019":{
        "Action": {
          "Avengers":true
        }
      },
      "2020":{
        "Action": {
          "Avengers":true
        }
      }
    }
  },
  "TV Shows": {
    "Westworld":true,
    "Game of Thrones": true,
    "Bron||Broen":true
  }
}

Add the data-autocompletree attribute to the target input field and specify the path to the JSON file.

<input type="text" data-path="movies.json" data-autocompletree>

You can also manually initialize the library and define the data in a JavaScript object as follows:

<input type="text" id="example">

var vehiclesData  = {
    "Cars":{
        "Audi": {
            "A1": false,
            "A2": true,
            "A3": {
                "Cabrio": true,
                "Hatchback": true,
                "Sedan": true,
                "Sportback": true
            }
        },
        "Lamborghini": {
            "Aventador": true,
            "Gallardo": true
        },
        "Bentley": false
    },
    "SUV": {
        "BMW": {
            "X1": true,
            "X2": true,
            "X3": false
        },
        "Jeep": {
            "Cherokee": {
                "2.0 TD": true
            },
            "Commander": true,
            "Grand Cherokee": true
        },
        "Maserati": true
    }
};

var instance = new AutoCompleTree(document.getElementById('example'), vehiclesData);

API methods.

// show the autocomplete dropdown
instance.show();
// hide the autocomplete dropdown
instance.hide();
// destroy the instance
instance.destroy();
// get the selected data
instance.getData();
// get the current suggestions
instance.getSuggestions();
// get the last selected item
instance.getLastSelected();
// get a list of selected data
instance.getSelectedList();
// select a specific item
instance.selectItemAtIndex(index);