Question

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

这是该问题的简化示例。（code at 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>

为什么jquery-ui自动完成在jstree中不起作用？

0 个答案: