AutoCompleTree is a pure JavaScript autosuggest widget lets you select child nodes of JSON data.
- CSS: autocompletree.css - autocompletree.min.css
- JavaScript: autocompletree.js - autocompletree.min.js
Include autocompletree.min.css and autocompletree.min.js in your page.
<link rel="stylesheet" href="autocompletree.min.css" />
<script src="autocompletree.min.js"></script>Add data-autocompletree and data-path attributes to the following input tag.
<input type="text" data-path=“jsonFile.json” data-autocompletree />Sample JSON file (jsonFile.json):
{
"Movies": {
"Watched":{
"Action": {
"The Dark Knight": true,
"Pulp Fiction": true
"Inception": true
},
"Drama": {
"City of God": true,
"Interstellar": true
}
},
"Watch List":{
"Action": {
"Snatch": true,
"Batman Begins": true,
"Unforgiven": true
},
"Drama": {
"The Hunt":true,
"A Separation":true
}
}
},
"TV Shows": {
"Westworld":true,
"Game of Thrones": true,
"Bron-Broen":true
}
}Or you can instantiate with Javascript code:
<input type="text" id="myInput" /><script>
var sampleData = {
"Movies" :{
"Action": {
"The Dark Knight": true,
"Pulp Fiction": true
"Inception": true
},
"Drama": {
"City of God": true,
"Interstellar": true
}
},
"TV Shows": {
"Westworld":true,
"Game of Thrones": true,
"Bron-Broen":true
}
};
var myComponent = new AutoCompleTree(document.getElementById(myInput), sampleData);
</script>When you focus on the input, the suggestion list will show up, then you can:
- Press
UP & DOWNkeys to move through suggestions. - Press
ENTERto select suggestion. - Press
ESCto hide suggestion list. - Press
BACKSPACEto select last item. When the last item is selected, pressTABto deselect or pressBACKSPACEagain to delete it.
AutoCompleTree instance has following methods:
| Method | Description |
|---|---|
| show | Show suggestions. |
| hide | Hide suggestions. |
| destroy | Destroy autocompletree instance. All events are detached and suggestion containers removed. |
| getData | Return a string of selected data that joined by ‘.’ |
| getSuggestions | Return a string array of current suggestions |
| getLastSelected | Return last selected item |
| getSelectedList | Return a string array of selected data |
| selectItemAtIndex | Select item (suggestion) by specific index |
myComponent.getData();
// "Movies.Watched.Action.Inception"
myComponent.getSelectedList();
// ["Movies","Watched","Action","Inception"]
myComponent.getLastSelected();
// "Inception"Chrome, Edge, Firefox
This project is licensed under the MIT License - see the LICENSE.md file for details.