`

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

 
阅读更多
实现文本框搜索多选框选择功能:
文本框搜索,多选框响应检索结果,选中触发事件后触发模版切换操作。
涉及到焦点触发显示多选框,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
  • 大小: 10.3 KB
  • 大小: 71.3 KB
  • 大小: 33.8 KB
0
0
分享到:
评论

相关推荐

    树形下拉多选框

    综上所述,"树形下拉多选框"是一个使用了ZTree和Bootstrap技术的组件,具备两种显示模式,支持多选操作,并且可能集成了搜索功能,方便用户在复杂的数据结构中筛选和选取需要的项。这种组件在网页应用中常用于权限...

    jquery实现下拉多选框效果

    本教程将深入探讨如何使用jQuery实现下拉多选框的效果,这在创建交互式用户界面时非常常见。 首先,我们需要理解下拉多选框的基本结构。在HTML中,我们可以使用`&lt;select&gt;`元素来创建一个下拉菜单,`&lt;option&gt;`元素...

    Jquery实现下拉多选框

    首先,我们需要理解下拉多选框的基本结构。在HTML中,我们可以使用`&lt;select&gt;`元素配合`&lt;option&gt;`元素来创建一个标准的下拉选择框。但是,如果要实现多选功能,原生的`&lt;select&gt;`标签并不支持,所以我们通常会用到定制...

    WinForm自定义下拉列表框用户控件

    本文将详细介绍如何创建一个自定义的下拉列表框用户控件(Custom ComboBox),这个控件不仅支持基本的文本选项,还能够显示自定义的控件作为下拉项。 标题中的“WinForm自定义下拉列表框用户控件”指的就是我们将在...

    tkinter自定义多选下拉列表框(带滚动条,全选)

    `OptionMenu`是tkinter内建的一个下拉列表组件,但默认情况下,它不支持多选。因此,我们需要自定义一个组件来实现这个功能。这通常涉及到创建一个`ttk`的`Combobox`,并添加一些额外的逻辑来处理多选和滚动条。 1....

    前端多选下拉框控件.zip

    4. CSS(层叠样式表): `multiple-select.css`是样式表文件,负责控制多选下拉框的视觉表现,如颜色、大小、字体、边框、过渡效果等。CSS使得我们可以定制控件的外观,使其与网站的整体设计保持一致。此外,它还可以...

    jquery下拉多选框demo.rar

    在CSS和jQuery中,我们可以使用媒体查询(`@media`)和`.resize()`事件来确保下拉多选框在手机、平板和桌面设备上都有良好的显示效果。 8. ** Accessibility(无障碍性)**:在开发过程中,不要忘记考虑无障碍性。...

    vue表单绑定实现多选框和下拉列表的实例

    在vue的实际开发过程中,我们如何将以选中的值直接渲染到页面中,这次主要说的是多选框和下拉列表的实现: 测试多选渲染: &lt;input type=checkbox name=hobby :value=item.id :checked=loopsss.indexOf(item...

    vue实现的树形结构加多选框示例

    本文主要探讨了使用Vue框架实现带有复选框的树形结构组件,重点在于在已有的递归组件基础上添加多选框功能,并实现一些基本的交互逻辑。要实现这样的功能,需要考虑以下几个关键技术点: 1. **递归组件的使用**:...

    多选下拉框控件

    数据源可以是数组,其中每个元素代表一个选项的信息,包括文本和是否被选中的状态。 - **事件处理**:实现多选下拉框的关键在于处理用户的交互事件,如点击选项、点击全选按钮等。需要监听这些事件,并更新相应的...

    js多级联动多选checkbox插件

    这包括改变checkbox的选中状态,可能还有显示隐藏的下一级选项,或者更新一些总结性的展示,如已选项目的总数。 6. **性能优化**:在处理大量数据时,应避免不必要的DOM操作,例如使用事件委托来减少事件监听器的...

    11款下拉式多选框

    尽管主要目的是创建可折叠的导航菜单,但经过适当的定制,也能实现下拉多选框的效果。 8. **jquery-textext**:这是一个jQuery插件,专注于文本输入框的增强,包括自动完成、筛选和多选等功能。它可以用于创建更...

    下拉多选框的实现 js源文件

    本文将深入探讨如何使用JavaScript实现下拉多选框的功能。 一、HTML基础 首先,我们需要创建一个基础的HTML结构来承载我们的下拉多选框。HTML的`&lt;select&gt;`元素用于定义下拉列表,`&lt;option&gt;`元素则用于定义列表中的...

    javascript下拉多选框复选框

    首先,让我们了解下拉多选框(Dropdown)和复选框(Checkbox)的基本概念。下拉多选框通常用于节省页面空间,当需要展示大量选项时特别有用。它由一个可点击的标题和一个隐藏的列表组成,列表中包含所有可用选项。复...

    jsp/html 实现下拉复选框

    下拉复选框通常由HTML的`&lt;select&gt;`元素与`&lt;option&gt;`子元素配合使用,而为了实现更丰富的交互效果,我们可能还会涉及到JavaScript(js)和CSS(css)的运用。在这个项目中,包含的`TestPublicUserManageNew.html`是主...

    多选下拉框(JS+DIV)

    例如,可以为多选下拉框对象添加新的方法来支持搜索功能,或者修改其属性来改变选项的显示方式。 具体实现时,我们可能会创建一个名为`DropdownBox`的构造函数,用于初始化多选下拉框对象。这个构造函数可以接受...

    下拉多选框美化下拉多选框美化下拉多选框美化

    在本主题中,我们将深入探讨如何使用EasyUI插件来美化下拉多选框,以提升用户体验和界面美观度。 EasyUI 是一个基于 jQuery 的轻量级前端框架,它提供了丰富的组件库,包括表格、窗口、菜单、对话框等,以及我们...

    纯js实现多选下拉框并模糊查询.html

    纯JS控制实现多选拉下框并且带全模糊查询,不是首字母查询,打勾多选并带回隐藏值,非常实用!!

    ext 下拉树 ext2

    标题中的"ext 下拉树 ext2"指的是使用Ext JS库构建的一个特定版本的下拉树组件,其中"ext2"可能表示使用的是Ext JS的2.x版本。Ext JS是一个强大的JavaScript框架,主要用于构建富客户端Web应用程序,它提供了一系列...

Global site tag (gtag.js) - Google Analytics