zoukankan      html  css  js  c++  java
  • 用js模拟查询方法 hide() filter(":contains('"

    查询前页面效果:

    查询后页面效果:

    jsp代码:

    <%@ include file="../../commons/jsp/mobileIncludeNew.jsp"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    <%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <title>选择科室</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=M8G5V0ShWHXehgbGwOSHZplxGmnoOsNb">
    </script>
    <link type="text/css" rel="stylesheet" href="<c:url value="../code/layer.css"/>" />
    <script type="text/javascript" src="<c:url value="../code/layer.js"></c:url>">
    </script>
    <script type="text/javascript" src="<c:url value="yygh_yjks.js"></c:url>"></script>
    <script type="text/javascript" src="../code/initFontSize.js"></script>
    <%-- <script type="text/javascript" src="<c:url value="yygh_map.js"></c:url>"></script> --%>
    </head>
    <body>
        <input id="orgcode" name="orgcode" type="hidden" value="${model.orgcode}" />
        <input id="orgname" name="orgname" type="hidden" value="${model.orgname}" />
        <!-- 最外层div -->
        <div>
            <div class="marg_botm bg_cor">
                <div class="flex_box">
                    <div class="hospital_photo"></div>
                    <div class="flex_item Dept_padding">
                        <div class="doc_Name org_margin">${model.orgname}</div>
                        <div class="doc_Job">医生数:${model.orgdocnum}人</div>
                        <div class="doc_Job">联系电话:${model.orgphone}</div>
                        <div class="doc_Job">
                            地址:<a id="searchplace" style="cursor:pointer;color: #4183c4" onclick="javascript:parentIframe();">${model.orgaddress}</a>
                            <%-- <input id="searchplace" value="${model.orgaddress}" style="50%" placeholder="请输入搜索地址" />
                            <input id="s_p_search_btn" onclick="javascript:openmap();" type="button" class="yzm_wfs" style="20%;" value="搜索"> --%>
                        </div>
                    </div>
                </div>
            </div>
            <div class="Dept_search flex_box">
                <img class="ico_select" src="../../znfz/images/ico-select.png"/>
                <div class="flex_item">
                    <input id="searchInput" type="text" class="searchInput" placeholder="输入科室名称进行搜索"  value="" onkeyup="search()"/>
                </div>    
            </div>
            <div class="oder">
                <c:forEach var="row" items="${model['data']}"  varStatus="s">
                    <div class="for_div" style="cursor:pointer;" onclick="javascript:selectys('${row.deptcode}','${row.deptname}');">
                        <div class="div_sx">
                            <div class="div_zy">
                                ${row.deptname}
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
    </body>
    </html>

    js相关方法:

    /**
     * 搜索科室功能
     */
    function search(){
        var txt=$("#searchInput").val();
        if($.trim(txt)!=""){
          $(".for_div").hide().filter(":contains('"+txt+"')").show();
        }else{
            $(".for_div").show();
        }
    }
  • 相关阅读:
    hibernate的获取session的两方法比较,和通过id获取对象的比较,一级缓存二级缓存
    hibernate的几个重要的类和接口
    hibernate框架配置
    c 全局变量
    其他函数-web_concurrent
    其他函数-web_get_int_property
    授权函数-web_set_certificate_ex
    授权函数-web_set_user
    动作函数-web_url
    动作函数-web_submit_data
  • 原文地址:https://www.cnblogs.com/liujie-e2/p/8875435.html
Copyright © 2011-2022 走看看