将自动完成添加到jstree输入节点 [英] Adding auto complete to jstree input node

问题描述

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

I am creating a JsTree which has an input box Node. I want to enable auto-complete for this input box. The application is in angular4, but the file i am using for creating the jstree is a .js file.

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();
                },

推荐答案

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

Best approach would have been to write your own jsTree plugin. You can possibly hook the keydown event of jsTree for edit box to populate your list of items as a autocomplete suggestion and using jQuery UI autocomplete feature.

.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-自动完成框

这篇关于将自动完成添加到jstree输入节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！