jQuery：beforeでdom要素追加

jQuery JavaScript

redmineの検索は、検索条件を可変にすることが可能。

必要な条件（フィルタ）をセレクトボックスから選ぶことで、
検索項目が増えてゆき、検索項目のチェックボックスを
外すことで検索条件を消すことができる・・・

といった検索機能を業務ツールに組み込む為に調査。
難しいかなぁと思っていたが実際はjqueryのみでさっくりいった為、記録。

１部・・検索項目の追加
２部・・検索項目を使用して検索

１部

その１　まずJQUERYを読み込み
<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.6.1");
  google.load("jqueryui", "1.7.1");
</script>
その２　セレクトボックスからjavascriptをキックする
<form name="form1">
  <select name="ChoiceFilter" onChange="OnButtonClick(this.form.ChoiceFilter.value);">
    <option selected value="search_1">検索１</option>
    <option value="search_2">検索２</option>
  </select>
</form>
その３

jqueryのbeforeやafterでdivにhtmlを追加する。

function OnButtonClick(filter_name){
$("#target_div").before("add txt");
}
<div id="target_div"></div>
その４

チェックボックスの外れる瞬間を監視して、divを書き換える
※.checkを使用するとIEでのみ動作しない。バグの様子。.clickを使用する。

$("#c_search_1").click(function(){
　　if($("#c_box_search_1").is(":checked")){
    　　$("#div_search_1").show("slow");
        　　 }else{
        $("#div_search_1").hide("slow");
        　　}
　　});

以上で完了。

２部

その５　テキストフォームの状況を監視（キーが上がったとき）して、値を保管。

値を渡す。

var param_search_1;
$("#search_1").bind("keyup", function(){param_search_1=$(this).val();});
その６　tbodyを使って検索結果を表記する（下記の例ではJSONで値を受け取る）
  function get_json(){
　　　//検索結果表示をリセット
      $('#result tbody').empty();
      var params = {search_1:param_search_1,search_2:param_search_2};
      $.getJSON(
        'http://192.168.0.2/test/test.php',
        params,
        function(data, status) {
        $.each(data,function(index,value){
          $('#result tbody').append("<tr><td>"+value.Result1+"</td><td>"+value.Result2+"</td><td>value.Result3</td></tr>");
        })
      }
    );
  }
<table id="result" border="1">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody> </tbody>
</table>
<a onClick="get_json();">検索</a>