如何在HTML表单中添加jstree搜索插件

How to add jstree search plugin inside a HTML form

本文关键字：添加 jstree 搜索 插件 表单 HTML      更新时间：2023-09-26

我有jstree搜索插件在HTML页面内工作良好。树的数据是用ajax加载的，搜索也是用ajax执行的。

一切都很好，直到我把它变成另一种形式。

如果我将相同的代码放入HTML表单中，它将不再工作，因为不再执行搜索。

不执行搜索，因为当我单击插件的搜索按钮时提交了整个表单。

如何捕获点击搜索按钮并阻止整个表单被提交?

全局表单有自己的提交按钮，它仍然可以正常工作。

我尝试了这个线程的解决方案，但它不起作用:http://groups.google.com/group/jstree/browse_thread/thread/7945aa59fca2d9c9 

<form id="list" name="list" action="save.php" method="post">
    <!-- jstree button and input text for search plugin -->
    <div id="mmenu">
        <input type="submit" id="search" value="Go" />
        <input type="text" id="text" value=""  />
    </div>
    <!-- the tree container -->
    <div id="indexation" class="indexation"></div>
    <input id="url" type="text" name="url" value="" size="30" title="www.example.org"/>
    <input type="submit" name="sendform" value="Save" />
</form>

<script type="text/javascript">
// Code for the menu buttons
     $(document).ready(function(){
    $("#mmenu input").click(function () {
        switch(this.id) {
            case "add_default":
            case "add_folder":
                $("#indexation").jstree("create", null, "last", {
            "attr" : {
            "rel" : this.id.toString().replace("add_", "") }
                });
                break;
            case "search":
                $("#indexation").jstree("search", document.getElementById("text").value);
                break;
            case "text": break;
            default:
                $("#indexation").jstree(this.id);
            break;
        }
    });
});
</script>

任何想法/提示都将非常感谢

这是jsfile :

http://jsfiddle.net/v9VRr/6/

谢谢你,

我找到了一个解决方案，不是很聪明，但至少它有效。只需将搜索所需的jstreehtml放在表单元素之外:

<form id="list" name="list" action="save.php" method="post">
<!-- the tree container -->
<div id="indexation" class="indexation"></div>
<input id="url" type="text" name="url" value="" size="30" title="www.example.org"/>
<input type="submit" name="sendform" value="Save" />
<form>
<!-- jstree button and input text for search plugin -->
<div id="mmenu">
    <input type="submit" id="search" value="Go" />
    <input type="text" id="text" value=""  />
</div>

然后将div id="mmenu"放置在CSS需要的位置

相关文章：