文本搜索框下拉多选框效果

实现文本框搜索多选框选择功能：
文本框搜索，多选框响应检索结果，选中触发事件后触发模版切换操作。
涉及到焦点触发显示多选框，ajax中文乱码处理等。






前端代码：

<div class="col right" id="change_copy_model">
        <%=render :partial=>"model_text"%>                      
</div>

#'_model_text.html.erb'

 <label class="label label">模版复制：</label>
                  <span style="position: relative; float: left;">
                  <input type="text" id ="projectNameText" onclick="click_text_show()" style="width:220px;position:absolute" placeholder="输入文字检索"/>
                  <div style="overflow-x: auto; overflow-y: auto;height:155px;width:259px; border:solid 1px;border-color:#B0C1D3;background-color:#ffffff;position: absolute; visibility: visible; z-index: 1000;margin-top:23px;display:none;" id="myare0" onmouseover="MM_over(this)" onmouseout="MM_out(this)" >
                  <%=select_tag 'copy_model[report][]', @yourarrarys.collect{|c| [c.name,c.id]}), :multiple => true, :size => 10,:onchange=>"check_model()",:style=>"width:259px;position: absolute; visibility: visible; z-index: 1000;"%>
                  </div>
                  </span>
                  <a href="#" onclick="searchProjectName()">
                  <img border="0" style="POSITION:absolute;margin-left:205px;margin-top:2px;" src="/stylesheets/themes/ultrapower/images2/find.jpg" id="hide_img">
                  </a>

JS代码：

<script type="text/javascript">
//点击隐藏模版复制列表
  document.onclick=function(e){
  var b=jQuery('#myare0')
  var el = window.event.srcElement;
  if(jQuery('#myare0').css("display")=="block"&&el.id!= 'projectNameText'&&el.parentNode.id!= 'myare0'&&el.parentNode.parentNode.id!= 'myare0'){
      jQuery('#myare0').hide();
  }
  }

//模版切换响应
  function check_model(){
window.location.href='/freed_report/ult_report_models/copy_report_model?id='+jQuery('#copy_model_report_').val()
}

//模版搜索按钮触发post事件
  function searchProjectName(){
    var mytext=document.getElementById("projectNameText").value;
    var myurl="/freed_report/ult_report_models/check_model_text?text_input="+mytext
    //url中文转码
    myurl=encodeURI(myurl);
    myurl=encodeURI(myurl); 
  $.ajax({
      type: "POST",
      url: myurl ,
      contentType: "application/x-www-form-urlencoded; charset=utf-8", 
      success: function(msg){
        $("#change_copy_model").empty();
        $("#change_copy_model").append(msg);
      },
      error: function(msg){
      }
    });
  }

//模版搜索框控制模版列表显隐
 function click_text_show(){
   jQuery('#myare0').show();
 }

//模版列表鼠标划入、划出事件
function MM_over(mmObj) {
	var mSubObj = mmObj;
	mSubObj.style.display = "block";
        mSubObj.style.backgroundColor = "#ffffff";
}
function MM_out(mmObj) {
        var mSubObj = mmObj;
         var el = window.event.srcElement;
         mSubObj.style.display = "none"
        }


</script>

后台代码：

def check_model_text
    #模版模糊查询
    @model_text_search=CGI::unescape(params[:text_input])
    @ult_report_models=FreedReport::UltReportModel.find(:all,:conditions=>"name like '%#{@model_text_search}%' ",:order=>"name desc,area_gran,time_gran")
    render :partial => 'model_text'
  end