dipson88 / treeselectjs

Treeselect on vanilla JS
MIT License
83 stars 15 forks source link

Combobox behaviour #46

Closed SvenFranz closed 1 year ago

SvenFranz commented 2 years ago

Thanks for thant really cool project! But I miss a free text input, like in a Combobox. So I can select an Item from the tree or enter any text.

Thabks and best regards, Sven

SvenFranz commented 2 years ago

Well... I implemented a quick&dirty solution by myself:

var lastValue = null; document.getElementsByClassName("treeselect-input__edit")[0].addEventListener("keyup", treeselectKeyUp); function treeselectKeyUp(e) { function existInOptionsTree(value, options = treeselectOptions) { var exist = false; for (var option of options) { if (option.hasOwnProperty("name") && value && option.name.toLowerCase() == value.toLowerCase()) exist = true; if (option.hasOwnProperty("children") && option.children != null && option.children.length > 0) exist = exist || existInOptionsTree(value, option.children); } return exist; } var value = document.getElementsByClassName("treeselect-input__edit")[0].value.trim(); if (!existInOptionsTree(value) && value != lastValue) { if (value != "") { var options = JSON.parse(JSON.stringify(treeselectOptions)) options.unshift({id: null, name: value, children: null, deleted: null, parent_id: null, value: ""}) treeselect.options = treeSearch(options, value); } else treeselect.options = treeselectOptions; treeselect.updateValue(value); treeselect.mount(); treeselect.toggleOpenClose(); treeselect.focus(); document.getElementsByClassName("treeselect-input__edit")[0].addEventListener("keydown", treeselectKeyDown); document.getElementsByClassName("treeselect-input__edit")[0].addEventListener("keyup", treeselectKeyUp); document.getElementsByClassName("treeselect-input__edit")[0].value = value; lastValue = value; } }

dipson88 commented 1 year ago

Hi @SvenFranz, sorry for the late answer. I think you missed something, like treeselectKeyDown and treeSearch. I see that you add an empty element during the typing. Can you explain the behavior one more time, I do not fully understand ' free text input', unfortunately, I don't know how Combobx works. Thank you!