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

Question

我有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> 

任何想法/提示將不勝感激

這裏是jsfiddle：

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

謝謝你，

Answer 1

我找到了解決辦法，而不是真正的聰明，但至少它的工作原理。只要把需要的搜索jstree HTML表單元素之外：

<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需要它。