1

我正在尝试在 jstree 中使用自动完成功能，但无法弄清楚为什么当两个绑定都在文档准备好时完成时它不起作用。如果在通过 Windows 加载或用户触发脚本的 jstree 绑定之后完成自动完成绑定，则它可以工作。

这是该问题的简化示例。（JSFiddle 的代码）

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jsTree v.1.0 - Demo</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.cookie.js"></script>
    <script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.hotkeys.js"></script>
    <script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
    <link type="text/css" rel="stylesheet" href="http://static.jstree.com/v.1.0pre/_docs/syntax/!style.css"/>
    <link type="text/css" rel="stylesheet" href="http://static.jstree.com/v.1.0pre/_docs/!style.css"/>
    <script type="text/javascript" src="http://static.jstree.com/v.1.0pre/_docs/syntax/!script.js"></script>

    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />

    <script>
        function autocomplete(element) {
            var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
            ];
            $(element).autocomplete({
                source: availableTags
            });
        };
    </script>

</head>
<body id="demo_body">
<div id="container">

<h1 id="dhead">jsTree v.1.0</h1>
<h1>DEMO</h1>
<div>
  <label for="tags">Tags: </label>
  <input id="tags" />
</div>

<h2>Autocomplete inside jsTree</h2>
<div id="description">

<!-- autocomplete inside a tree works when the user adds autocomplete manually -->
<button type="button" onclick="autocomplete('#tagstree')">add autocomplete manually (comment out other autocomplete bindings)</button>

<div id="demo1" class="demo" style="height:100px;">
    <ul>
        <li id="phtml_1">
            <label for="tagstree">Tags: </label>
            <input id="tagstree" />
            <ul>
                <li id="phtml_2">
                    <a href="#">Child node 1</a>
                </li>
                <li id="phtml_3">
                    <a href="#">Child node 2</a>
                </li>
            </ul>
        </li>
        <li id="phtml_4">
            <a href="#">Root node 2</a>
        </li>
    </ul>
</div>
<script type="text/javascript">
$(function () {

/* just to demonstrate an autocomplete field by itself works */
   autocomplete('#tags');

/* adding autocomplete on an element in the tree doesn't work */
   autocomplete('#tagstree');

    $("#demo1")
        .jstree({
            "plugins" : ["themes","html_data","ui","crrm","hotkeys"],
            "core" : { "initially_open" : [ "phtml_1" ] }
        })
        .bind("loaded.jstree", function (event, data) {
        });

});

/* autocomplete inside a tree works when it gets added via windows load instead of document ready */
//$(window).load(function () {
//    autocomplete('#tagstree');
//});

</script>
</div>

</body>
</html>
4

0 回答 0