向 jstree 输入节点添加自动完成

Question

我正在创建一个 JsTree，它有一个输入框节点。我想为此输入框启用自动完成功能。该应用程序在 angular4 中，但我用于创建 jstree 的文件是一个 .js 文件。

inst.create_node(obj, {
li_attr : {
                            'class' : 'child-menu listener-menu'
                        },
                        a_attr:{
                            'ondragover' : 'allowDropSR(event,"widgets")',
                            'ondrop' : 'dropSR(event,"widgets")'
                        },
                        text : "<span>Enter Country here</span>"
                    },
                     "last", function(new_node) {
                        new_node.data = {
                                file : true,
                                stopDrilldown : true,
                                hasParent : true
                        };
                        setTimeout(function () {
                            inst.edit(new_node);
                            $('.jstree-rename-input').attr();
                        },0);

                    });
                    $('.widget-list-tab a').tab('show');
                    $('.jstree-clicked').next('ul').find('li:last').find('a').focus();
                },

Answer 1

最好的方法是编写自己的 jsTree 插件。您可以将 jsTree 的 keydown 事件挂接到编辑框以填充您的项目列表作为自动完成建议并使用 jQuery UI 自动完成功能。

.bind("keydown.jstree", function(e) {
    if(e.target.tagName && e.target.tagName.toLowerCase() === "input" 
    && e.target.className.toLowerCase() === "jstree-rename-input" ) { 
        $(".jstree-rename-input").autocomplete({
            // AJAX can be used for list here
            source: countries
        });
    }
});

countries: 是列表建议。

您可以在 https://everyething.com/jsTree-with-AutoComplete-Box

查看更多详细信息

向 jstree 输入节点添加自动完成

Adding auto complete to jstree input node

javascript

angular

autocomplete

jstree