Question

我正在创建一个JsTree，它具有一个输入框Node。我想为此输入框启用自动完成功能。该应用程序位于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
        });
    }
});

国家：是列表建议。

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

中查看更多详细信息

将自动完成添加到jstree输入节点

1 个答案: