精华内容
下载资源
问答
  • jquery分类搜索框带过滤器的搜索框
  • 在这里,我们使用的是谷歌的AJAX搜索API来创建自定义搜索引擎,使用它可以在网络上搜索结果,图像,视频和您网站的新闻项目
  • NULL 博文链接:https://xjwolaile.iteye.com/blog/1912429
  • jQuery仿京东多条件分类筛选及搜索
  • 当输入框获得焦点后,自动弹出下拉导航,可以选择搜索范围
  • jQuery下拉菜单分类搜索框代码JQuery drop-down menu category search box code
  • jQuery分类下拉搜索框代码基于jquery.3.3.1.min.js制作,根据产品分类进行商品搜索
  • jQuery分类下拉选择搜索框代码是一款支持按分类进行搜索的下拉菜单搜索框代码。
  • jQuery模糊搜索框下拉选择代码是一款模糊搜索组件,点击搜索框文本下拉框提示效果。
  • jQuery分类下拉选择搜索框代码是一款支持按分类进行搜索的下拉菜单搜索框代码。
  • 一款比较常用的jQuery搜索框下拉菜单分类选择代码,对选择的栏目分类进行搜索
  • jquery搜索框下拉列表选择搜索分类效果.rar
  • jquery表单分类搜索.zip

    2019-07-05 00:25:50
    jquery表单分类搜索
  • 一款美观实用的jQuery下拉分类选择搜索框表单代码,可以选择搜索内容的所属分类,让搜索结果更精确。
  • jQuery基于layui制作产品分类多条件筛选代码,也适合做购物商城商品分类筛选搜索功能,还带列表分页效果。
  • jQuery分类下拉选择搜索框代码是一款支持按分类进行搜索的下拉菜单搜索框代码。
  • jQuery仿京东搜索条件筛选代码是一款基于json制作京东商品列表搜索条件筛选,可自定义多个条件筛选功能代码。适用于商城商品快速筛选代码。
  • 特效描述:jquery 表单分类搜索jquery表单分类搜索代码代码结构1. 引入JS2. HTML代码*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{font:12px/180% Arial, Helvetica, sans-serif,"新宋体";}...

    特效描述:jquery 表单分类搜索。jquery表单分类搜索代码

    代码结构

    1. 引入JS

    2. HTML代码

    *{margin:0;padding:0;list-style-type:none;}

    a,img{border:0;}

    body{font:12px/180% Arial, Helvetica, sans-serif,"新宋体";}

    /* searchbox */

    .searchbox{background:#3366cc;height:28px;width:720px;margin:20px auto;padding:7px 0 0 10px;width:380px;}

    #keyword{float:left;height:21px;line-height:21px;border:none;padding:0px;}

    #searchsort{float:left;position:relative;display:none;width:66px;overflow:hidden;height:21px;background-color:#fff;font-size:12px;}

    #searchsort .selectedsort{height:17px;padding-top:4px;color:#555;line-height:1;text-align:center;white-space:nowrap;}

    #searchsort .searchsortlist{position:absolute;text-align:left;width:64px;display:none;background-color:#fff;box-shadow:1px 1px 1px rgba(0,0,0,0.3);left:1px;top:21px;border:1px solid #ccc;border-top:none;color:#555;}

    #searchsort .sortico{width:7px;height:4px;display:inline-block;font-size:0px;vertical-align:middle;margin-left:3px;background:url(images/searchIco.png) no-repeat;}

    #searchsort .searchItem{height:21px;line-height:21px;padding-left:4px;cursor:pointer;}

    #searchbtn{float:left;display:inline;margin:0px 0px 0px 3px;width:62px;height:23px;border:none;cursor:pointer;padding:0px;background:url(images/kwbtn.jpg) no-repeat;}

    展开全文
  • 支持分类搜索排序的jQuery图片筛选过滤代码
  • jQuery搜索框实例绑定提交事件是一款下拉选择多种搜索引擎分类搜索框输入文字键盘回车绑定提交搜索按钮代码。    dropdown-toggle search-select" data-toggle="dropdown">百度搜索  ...
  • jQuery手机端搜索框样式代码基于jquery.1.9.1.min.js制作,可删除输入的搜索内容。
  • jQuery下拉框分类搜索效果代码,比较适合内容模型较多的网站使用,基于jquery.select.js和jquery-1.8.3.min.js实现,兼容所有主流浏览器。
  • jQuery Select下拉框分类菜单多选插件一款功能比较全面的自定义下拉菜单选项多选代码,除了可以对选项进行分类,还带有搜索功能。
  • jQuery基于Layui搜索下拉框代码是一款支持中文跟首字母搜索下拉提示列表代码。
  • 这是一款比较实用的jQuery图片过滤插件,jQuery图片筛选过滤代码支持分类,标题搜索,排序,移动效果等图片过滤方式。
  • 思路很简单,就是用jquery把输入结果和查询绑定,然后拼接显示出来就行了。 具体代码见3.searchResult的//自动提示——搜索框 ①首先关于绑定input,propertychange事件,大多情况下input能够正常提示要显示的结果...

    文章的三个部分:
    1.方法讲解
    2.效果展示
    3.代码
    1.方法讲解

    1. 自动提示(效果见第一张图)
      思路很简单,就是用jquery把输入结果和查询绑定,然后拼接显示出来就行了。
      具体代码见3.searchResult的//自动提示——搜索框

    ①首先关于绑定input,propertychange事件,大多情况下input能够正常提示要显示的结果,但是笔者在中文输入法下回车输入英文,并不会出结果,所以添加了propertychange事件.
    详情参考
    http://blog.csdn.net/this_itboy/article/details/51727226
    ②向action传值时,
    ‘${pageContext.request.contextPath}/bid/reAction_autoComplete.action?keyWord=’+searchText+’&keyType=’+keyType,
    用&传第二个值
    ③拼接自动提示的结果

    for(var i=0;i<d.length;i++){
                     html+= '<li>'+d[i].searchText+'</li>' ;
                  }

    ④搜索框默认情况下是不显示的,用hide()方法隐藏,当输入结果时,自动出现并定位在搜索框下方
    这里的search-suggest就是智能提示的id

    $('#search-suggest').show().css({
                        top:$('#search-form').offset().top+$('#search-form').height(),
                        left:$('#search-form').offset().left,
                        position:'absolute',
                        width:inputBoxW-inputBtnW
                    });

    然后点击空白处,提示框消失

    $(function(){
            $(document).bind('click',function(){
             $('#search-suggest').hide();
            });

    ⑤在点击智能提示的数据时,把提示的内容放到搜索框里面并执行方法
    这里如果不知道怎么具体找值,可以先把this输出,然后在console里面找,这里感谢Johnson的帮助,用处很大。

     $("#search-result li").click(function(){
                        var $this=$(this);
                        console.log($this["0"].innerText);
                        $('#search_input').val($this["0"].innerText);
                        $("#ss").click();
                    });

    2.分类搜索

    在这里,我采用了比较简单的方法。就是把页面分成两个部分,显示搜索结果的searchResult_content.jsp和大页面的searchResult.jsp
    每次执行搜索的时候,只要先判断searchResult里面的参数,然后传给后台执行返回显示结果的内容就好了。
    这里没什么难度,值得一提的是,可以通过下列方式调用css样式,其中faultLight是默认的颜色样式。

    var faultLight={
                'color':'#000',
                'background-color':'#FFF'
            }
    
    $("#publishDatetime").css(highLight);

    2.效果展示

    自动提示功能:

    搜索结果及分类搜索
    3.代码:
    1.这是主页的搜索框页面代码 searchBox.jsp

    <!--搜索框-->
    <form id="searchArea" class="navbar-form navbar-right form-inline paddingLRzero" role="search">
                                <div class="form-group">
                                     <input type="text" id="searchInput" class="form-control search-input" name="keyWord" placeholder="请输入关键词">
                                </div>
                                <button  type="button" id="searchBtn" class="btn btn-default">
                                   <span class="glyphicon glyphicon-search"></span>                       
                                </button>
                          </form> 
    
     //搜索
        $("#searchBtn").click(function(){
            var keyWord=$('#searchInput').val();
            $.ajax({   
                url:'${pageContext.request.contextPath}/bid/reAction_querySearchResult.action',
                type:'POST',
                data:{
                      pageNo:1,
                      keyWord:keyWord
                },
                success:function(data){    
                    location.href='/DataMarket/searchResult?keyWord='+keyWord
                },
            })
    
        })

    2.这里是主搜索框及页面的代码searchResult.jsp

    <%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <%@taglib prefix="s" uri="/struts-tags" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>搜索结果</title>
    <%@include file="/public/website-head.jspf"%> 
    <script type="text/javascript">
            //初始条件
            //高亮
    
            var highLight={ 
                'background-color':'#0099FF',
                'color':'white'
            }
            //默认亮度
            var faultLight={
                'color':'#000',
                'background-color':'#FFF'
            }
    
            var keyType="resource";
            var sortValue="publishDatetime";
        $(function(){
    
            $("#resource").css(highLight);
            $("#publishDatetime").css(highLight);
    
            //把搜索类型按钮   绑定点击事件
            $("#search-list li").click(function(){
                var $this=$(this);
                keyType=$this["0"].attributes["1"].value
                if(keyType=="requirement"){
                    $("#buyCount").hide();
                    if(sortValue=="buyCount"){
                        sortValue="publishDatetime";
                        $("#publishDatetime").css(highLight);
                    }
                }else{
                    $("#buyCount").show();
                }
                $this.css('background-color','#13c5c4')
                $("#search-list li").css(faultLight);
                $this.css(highLight);
                console.log($this["0"].attributes["1"].value);
                $("#ss").click(); 
            });
            //把排序方式  绑定点击事件
            $("#search-sort li").click(function(){
                var $this=$(this);
                sortValue=$this["0"].attributes["1"].value
                $("#search-sort li").css(faultLight);
                $this.css(highLight)
                console.log(sortValue);
                $("#ss").click(); 
            });
            //绑定回车事件,有问题
            $("body").keydown(function() {
                if(event.keyCode=="13"){ 
    
                $("#ss").click(); 
            } 
            }); 
    
         $("#ss").click(function(){
            // 载入
            var dialog = bootbox.dialog({
                message: '<p><i class="fa fa-spin fa-spinner"></i> 载入中...</p>',
                closeButton: false
            }); 
             var pageNo=$("#hidCurrentPage").val();
             var keyWord=$('#search_input').val();
             if(keyWord.length==0){
                 dialog.modal('hide');// 载入结束
    
             }else{
                 if(pageNo==''||typeof(pageNo)==undefined){
                     $.ajax({
                        url:'${pageContext.request.contextPath}/bid/reAction_complexSearch.action',
                        type:'POST',
                        data:{
                            pageNo:1,   
                            keyType:keyType,
                            keyWord:keyWord,
                            sortValue:sortValue
                        },
                        success:function(data){    
                            $('#110').html(data);
                            dialog.modal('hide');// 载入结束
                        },
                        error:function(){
                            dialog.modal('hide');// 载入结束
                            errorTip();//出错提示       
                        },
    
                    }); 
                 }else{
                     $.ajax({
                        url:'${pageContext.request.contextPath}/bid/reAction_complexSearch.action',
                        type:'POST',
                        data:{
                            pageNo:pageNo,  
                            keyType:keyType,
                            keyWord:keyWord,
                            sortValue:sortValue
                        },
                        success:function(data){    
                            $('#110').html(data);
                            dialog.modal('hide');// 载入结束
    
                        },
                        error:function(){
                            dialog.modal('hide');// 载入结束
                            errorTip();//出错提示       
                        },
                    });     
                 } 
             }
    
    
    
        })
             })
    
          //跳转页面的方法
        $(function ttt(){
            var keyWord="";
             var url = location.search
             if (url.indexOf("?") != -1) {
                 var str = url.substr(1);
                   strs = str.split("=");
                   keyWord=strs[1];
                   $('#search_input').val(keyWord);
                   $("#ss").click(); 
             }
            console.log(keyWord);  
    
        })
    
    
        //自动提示——搜索框
        $(function(){
        $('#search_input').bind('input  propertychange click',function(){
    
            var searchText =$('#search_input').val();
            if($.trim(searchText)=="" ){
                 $('#search-suggest').hide();
            }else{
                $.get('${pageContext.request.contextPath}/bid/reAction_autoComplete.action?keyWord='+searchText+'&keyType='+keyType,function(d){
                    var d=d;
                    var html='';
                  console.log(d);
                  for(var i=0;i<d.length;i++){
                     html+= '<li>'+d[i].searchText+'</li>' ;
                  }
                  var inputBoxW=$('#search_input').outerWidth(true);
                  var inputBtnW=$('#ss').outerWidth(true);
                  $('#search-result').html(html);
                  $('#search-suggest').show().css({
                        top:$('#search-form').offset().top+$('#search-form').height(),
                        left:$('#search-form').offset().left,
                        position:'absolute',
                        width:inputBoxW-inputBtnW
                    });
                  $("#search-result li").click(function(){
                        var $this=$(this);
                        console.log($this["0"].innerText);
                        $('#search_input').val($this["0"].innerText);
                        $("#ss").click();
                    });
                },'json');  
            }
    
        })
        })
    
        $(function(){
            $(document).bind('click',function(){
             $('#search-suggest').hide();
            });
    
    
        })
    
    
        $(function(){
                //二级标题
                $("#current").empty();
                var url = location.pathname;
                console.log(url.split('/'));
                if(url.split('/')[2]=="searchResult"){
                    var html="<strong>搜索结果 </strong>";
                    $("#current").append(html);
                }
                var allH = $(window).outerHeight(true);//总高度
                var footerH =$('#footer').outerHeight(true);//底部高度
                var headH =$('#head-bar-area').outerHeight(true);//导航高度
                var loginH =$('#head-login-area').outerHeight(true);//登录高度
                $('#searchResultArea').css('min-height',allH-footerH-headH-loginH-30);
        })  
    
    
                //错误页面执行
            function errorTip(){
                var dialog = bootbox.dialog({
                    message: '<i class="glyphicon glyphicon-remove-sign text-danger"></i>未知错误!页面将在3秒后刷新<i class="fa fa-spin fa-spinner"></i>,如果没有,<a href="/DataMarket/index">请点击此处刷新</a>',
                    closeButton: false
                });
                dialog.init(function(){
                    setTimeout(function(){
                        location.href ="${pageContext.request.contextPath}/index";
                    }, 3000);
                });
    
            }
    </script>
    
    </head>
    
    <body>
        <!-- 顶部 -->
        <%@include file="header.jsp"%>
        <!-- LOGO搜索 -->
        <%@include file="header_sec.jsp"%>
    
        <div id="searchResultArea">
        <!-- 搜索框 -->
         <div class="container searchResultInput">
             <div class="row ">
                 <div class="col-md-6 col-sm-8 col-md-offset-3 col-sm-offset-2 col-xs-12">       
                 <div id="search-form">
                       <input type="text" id="search_input" class="form-control search-input" name="keyWord" placeholder="请输入关键词" autocomplete="off" value="">
    
                       <button class="btn btn-default" id="ss" >
                              <span class="glyphicon glyphicon-search"></span> 搜索 
                       </button>                          
                  </div>
    
                 </div>
             </div>
         </div>
    
         <!-- 筛选条件 -->
         <div class="container searchResultFilter">
             <hr>
             <div class="row ">
                <div class="col-xs-12 filterArea">                 
                     <!-- 选择搜索类型 -->
                     <label class="fl filterAreaLable">搜索类型:</label>
                     <ul class="list-inline fl" id="search-list">
                         <li class="list-group-item"  id="resource" value="resource">资源</li>
                         <li class="list-group-item" id="requirement"  value="requirement">需求</li>
                     </ul>
                </div>        
             </div>
             <div class="row mrgTopSma filterArea">
                <div class="col-xs-12">
                     <!--  排序方式-->                
                     <label class="fl filterAreaLable">排序方式:</label>
                     <ul class="list-inline fl" id="search-sort">
                        <li class="list-group-item" id="publishDatetime" value="publishDatetime">最新</li>
                        <li class="list-group-item" id="price" value="price">价格降序 </li>
                        <li class="list-group-item" id="buyCount" value="buyCount">下载降序</li>
                    </ul>                
                </div>        
             </div>
             <hr>               
         </div>
    
    
    
    
    
            <!--自动提示  -->
         <div class="suggest" id="search-suggest" style="display:none">
             <ul id="search-result">
             </ul>
         </div>
    
    
         <!-- 内容-->    
         <input type="hidden" id="hidCurrentPage" value="${currentPage}"/>
         <div id="110"  class="container">   
    
          </div>            
    
    
    
    
    
        </div>
        <hr/>    
        <!-- 页末 -->
        <%@include file="footer.jsp"%>
    
    </body>
    </html>

    3.这是里主搜索页面的搜索结果 searchResult_content.jsp
    注意:此页面被包含在searchResult中。

    <%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <%@taglib prefix="s" uri="/struts-tags"%>    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    //根据页数查询数据列表
        function queryRequirListByPage(i) {
        var pageNo=i;
        var keyWord=$('#search_input').val();
        reListContentSubmit(pageNo,keyType,sortValue,keyWord);//发送请求
    }
        //根据下拉查询数据列表
        function selectPage(obj){
            var pageNo=obj.options[obj.selectedIndex].value;
            var keyWord=$('#search_input').val();
            console.log(pageNo);
            console.log(keyType);
            console.log(sortValue);
            console.log(keyWord);
            reListContentSubmit(pageNo,keyType,sortValue,keyWord);//发送请求
            }
    
        //发送请求
        function reListContentSubmit(pageNo,keyType,sortValue,keyWord){
            // 载入
            var dialog = bootbox.dialog({
                message: '<p><i class="fa fa-spin fa-spinner"></i> 载入中...</p>',
                closeButton: false
            }); 
            $.ajax({
                url:'${pageContext.request.contextPath}/bid/reAction_complexSearch.action',
                type:'POST',
                data:{pageNo:pageNo,
                      keyType:keyType,
                      sortValue:sortValue,
                      keyWord:keyWord
                },
                success:function(data){    
                    $('#110').html(data);
                    dialog.modal('hide');// 载入结束
                },
                error:function(){                   
                    dialog.modal('hide');// 载入结束
                    errorTip();//出错提示       
    
                },
    
            });
    
        }
    
    
    </script>
    </head>
    <body>
    <!-- 内容-->
    
                      <div class="well">
                            <input type="hidden" name="hidCurrentPage2" id="hidCurrentPage" value="${currentPage}">
                            <input type="hidden" id="hidAllPage" value="${allPage}">
                            <input type="hidden" id="hidSortValue" value="${sortValue}">
                            <input type="hidden" id="hidKeyType" value="${keyType2}">
                            <!--搜索需求-->
                            <s:if test="%{'requirement' == #keyType2}">
                            <s:iterator value="#requiList" status="L">  
                            <div class="data-down-box">
                                <div class="row">
                                    <div class="col-xs-12">
                                        <h4 class="ellipsis">
                                            <s:property value="#L.index+1"/>.
                                            <a href="/DataMarket/bid/bidAction_queryById?id=${id}" >${title}</a>
                                        </h4>
                                    </div>                                                                                                  
                                </div>
                                <div class="row mrgTopSma">
                                    <div class="col-xs-12 ">                        
                                        <p class="data-provider padLeftBig sec-color ellipsis">悬赏价格:<span>${price}元</span></p>
                                        <p class="data-intro padLeftBig ellipsis sec-color">需求描述:<span>${requirementDescription}</span></p>
                                    </div>              
                                </div>
                                <hr/>       
                            </div>
                            </s:iterator>
                            </s:if>
                            <!--搜索数据-->
                            <s:elseif test="%{'resource' == #keyType2}">
    
                            <s:iterator value="#datumList" var="dd" status="L">                       
                          <div class="data-down-box box">
                            <div class="row">
                                <div class="col-sm-3 col-xs-4 mrgZero paddingRzero">                        
                                    <img class="img-responsive text-center" alt="截图" src="/DataMarket/images/carousel/bg-home-bigscreen.jpg">
                                </div>
                                <div class="col-sm-9 col-xs-8">
                                    <h4 class="ellipsis"><strong>
                                        <s:property value="#L.index+1"/>.
                                        <a href="${pageContext.request.contextPath}/b2c/datumAction_getByDatumSn.action?datumSn=${dd.datumSn}">${dd.datumName}</a></strong>                                    
                                    </h4>
                                    <div class="row mrgTopSma">
                                        <div class="col-xs-12">
                                            <a href="#" class=" btn btn-default btn-xs " >标签1</a>
                                        </div>                      
                                    </div>
                                    <div class="row mrgTopSma">
                                        <div class="col-xs-12">
                                            <p class="data-intro ellipsis">
                                                <span class="main-color lead"><s:property value="#dd.price"/><span></span></span>                                       
                                            </p>
                                        </div>                      
                                    </div>
    
                                    <div class="row star-eva-area">
                                        <div class="col-xs-12">
                                            <span class="star-area">
                                                <!-- 动态赋予CLASS即可完成评价,但是,半个的星星难以解决-->
                                                <span class="glyphicon glyphicon-star ylo-color"></span>  
                                                <span class="glyphicon glyphicon-star-empty ylo-color"></span>  
                                                <span class="glyphicon glyphicon-star-empty ylo-color"></span>  
                                                <span class="glyphicon glyphicon-star-empty ylo-color"></span>  
                                                <span class="glyphicon glyphicon-star-empty ylo-color"></span> 
                                            </span>
    
                                            <span class="eva-area padLeftBig">
                                                <span class="sec-color">暂无评价</span>
                                            </span>
                                        </div>                      
                                    </div>
    
                                    <div class="row mrgTopSma">
                                        <div class="col-xs-12">
                                            <p class="data-intro col-sm-6 col-xs-12 visible-*-inline-block paddingLzero">
                                                <span class="sec-color ">
                                                    <span class="glyphicon glyphicon-circle-arrow-down"></span><span >下载</span><span>${dd.buyCount}</span><span></span>
                                                    <span class="glyphicon glyphicon-copyright-mark padLeftBig"></span><span >收藏</span><span>1</span><span></span>
                                                </span>
                                            </p>
                                            <p class="data-intro col-sm-6 col-xs-12 visible-*-inline-block paddingLzero">    
                                                <span>
                                                    <span class="glyphicon glyphicon-info-sign sec-color"></span>
                                                    <span>
                                                        ${dd.uploaderEmail.username}
                                                        <span class="sec-color padLeftBig">${dd.publishDatetime}</span>
                                                        <span class="sec-color">&nbsp;发布</span>
                                                    </span>
                                                </span>
                                            </p>                                                
    
                                        </div>                      
                                    </div>
    
                                    <hr class="mrgZero">
                                </div>                                                                                                  
                            </div>
                            <hr/>       
                        </div>
                            </s:iterator>
                            </s:elseif>
    
    
                        <!-- 分页 -->
                        <div id="rePagerDiv" class="rePagerDiv box">
                            <nav>
                              <ul class="pager">
    
                                  <!-- 判断当前页是否位1,如果不为1则显示上一页, -->   
                                  <s:if test="1 == #currentPage">     
                                  </s:if>
                                  <s:else>
                                    <li>        
                                      <a href="javascript:void(0)" aria-label="Previous" onclick="queryRequirListByPage(${currentPage-1})">
                                        <span aria-hidden="true">&laquo;</span>
                                      </a>
                                    </li>     
                                  </s:else>
    
                                <!-- 首页 -->                              
                                <li><a href="javascript:void(0)" onclick="queryRequirListByPage(1)">首页</a></li>
    
                                <li>
                                    <span><span class="main-color">${currentPage}</span>/&nbsp;${allPage}页</span>                              
                                </li>
    
                                <!-- 尾页 -->                              
                                <li><a href="javascript:void(0)" onclick="queryRequirListByPage(${allPage})">尾页</a></li>
    
                                <!-- 判断当前页和总页数,小于则显示下一页, -->    
                                <s:if test="#currentPage < #allPage">
                                    <li>
                                      <a href="javascript:void(0)" aria-label="Next" onclick="queryRequirListByPage(${currentPage+1})">
                                        <span aria-hidden="true">&raquo;</span>
                                      </a>
                                    </li>
                                </s:if>
                                <li>
                                   <span class="skipPageSpan">跳转到第&nbsp;
                                    <select onchange="selectPage(this)">
                                        <s:iterator var="lst" begin="1" end="#allPage"  step="1">                                       
                                            <s:if test="%{#lst == #currentPage}">
                                                <option selected="selected" value="<s:property/>" ><s:property/></option>     
                                              </s:if>
                                              <s:else>
                                                    <option value="<s:property/>" ><s:property/></option>
                                              </s:else>
                                        </s:iterator>                                                                             
                                    </select>
                                   &nbsp;页
                                   </span>
                                 </li>
    
                              </ul>
                            </nav>
    
                        </div>  
                        </div>        
    </body>
    </html>

    4.requirementAction

    //复杂搜索
        public String complexSearch(){
            int pageSize=5;//每页记录
            long icount=0;
            //判断搜索类型
            if(keyType.equals("requirement")){
                System.out.println(keyType);
             icount=requirementService.countAllSearch(keyWord);
             String hql="select r from Requirement r where r.title like '%"+ keyWord +"%' and r.reStatus!=2 " ;
             hql=hql+"order by r."+sortValue+" desc";
             List<Requirement> requiList=requirementService.queryByPage(hql, pageNo, pageSize);
             ActionContext.getContext().put("requiList", requiList);//需求列表
            }else if(keyType.equals("resource")){
                icount=datumService.countAllSearch(keyWord);
                String hql="select d from Datum d where d.datumName like '%"+ keyWord +"%'  " ;
                hql=hql+"order by d."+sortValue+" desc";
                System.out.println(hql);
                List<Datum> datumList=datumService.queryByPage(hql, pageNo, pageSize);
                ActionContext.getContext().put("datumList", datumList);//资源列表
            }
            long allPage;//总页数
            //判断是否能整除,能则直接,不能则+1;
            if((icount%pageSize)==0){
                allPage=icount/pageSize;
            }
            else{
                allPage=(icount/pageSize)+1;
            }
            System.out.println("总记录:"+icount+";总页数:"+allPage+";当前页码:"+pageNo);
            ActionContext.getContext().put("icount", icount);//总记录数
            ActionContext.getContext().put("allPage", allPage);//总页数
            ActionContext.getContext().put("currentPage", pageNo);  //当前页码
            ActionContext.getContext().put("keyType2", keyType); //返回的keyType,加上2表示是返回的值
            session.put("sessionCurrentPage", pageNo);
            return "searchContent";
        }
    
    
    
    
    //搜索智能提示
            public String autoComplete() throws Exception{
                System.out.println(keyType);
                    if(keyType.equals("requirement")){
                        for( Requirement a :requirementService.getByReTitle(keyWord)){
                            JSONObject jo = new JSONObject();
                            jo.put("searchText",a.getTitle());
                            jsonArray.add(jo);
                        }
                    }else if(keyType.equals("resource")){
                        for( Datum a :datumService.getByDatumName(keyWord)){
                            JSONObject jo = new JSONObject();
                            jo.put("searchText",a.getDatumName());
                            jsonArray.add(jo);
                        }
                    }
    
    
                return "jsonArray";
            }

    5.部分struts配置

    <action name="reAction_*"  class="com.datamarket.action.RequirementAction" method="{1}">
                <!-- 配置类型的json的Result -->
                <result name="jsonObject" type="json">
                    <!-- 为该Result指定参数 -->
                    <param name="noCache">true</param>
                    <param name="contentType">text/html</param>
                    <!-- 设置只序列Action的map属性 -->
                    <param name="root">jsonObject</param>
                </result>           
                <result name="jsonArray" type="json">
                    <!-- 为该Result指定参数 -->
                    <param name="noCache">true</param>
                    <param name="contentType">text/html</param>
                    <!-- 设置只序列Action的map属性 -->
                    <param name="root">jsonArray</param>
                </result>   
                <result name="requireContent">
                    /WEB-INF/content/require_list_content.jsp
                </result>
                <result name="requireSuperContent">
                    /WEB-INF/content/left_super_reword.jsp
                </result>   
                 <result name ="searchContent">
                    /WEB-INF/content/searchResult_content.jsp
                </result>
                <result name="searchResultPage">
                    /WEB-INF/content/searchResult.jsp
                </result>   
            </action>      
            <action name="require_list/*/*">
                <result>/WEB-INF/content/require_list.jsp</result>          
            </action>
            <action name="*">
                <result>/WEB-INF/content/{1}.jsp</result>           
            </action>  
        </package>
    展开全文
  • jquery搜索功能的下拉框菜单插件

    千次阅读 2019-07-15 11:31:42
    一、下拉选择带搜索 1.插件效果图1: 2.插件效果图2: 3.效果图3: 4.插件很好用,就算小白拿到代码也会用,代码我上传到csdn上面了,下载地址如下: ...5.有个坑提示一下:实际应用中下拉框数据肯定是动态...

    一、下拉选择带搜索

    1.插件效果图1:

    2.插件效果图2:

    3.效果图3:

    4.插件很好用,就算小白拿到代码也会用,代码我上传到csdn上面了,下载地址如下:

    https://download.csdn.net/download/royal1235/11351100

    5.有个坑提示一下:实际应用中下拉框数据肯定是动态数据,我采用拼接方式将数据拼上去,代码案例如下:

    注意:传统方式这样拼接是不会有任何问题,包括这次下拉框数据这样拼接也完全不应该有问题,但是问题就是出现了,

               问题就是数据有,但是样式没了,搜索效果也没了,效果图如下:

    这样的效果完全不是我们想要的啊,问题出在哪里?在页面中有这样一个方法,如下:

    解决方案:将这个方法和拼接数据放在一起就ok了,代码如下:

    效果图如下:

    二、附加插件:下拉选择带搜索另一种方式

    效果图:

    源码下载地址:

    https://download.csdn.net/download/royal1235/11649844

    没有积分下载的同学加微信免费获取:

     

    三、附加插件:下拉多选插件

    效果图:

    下载地址:

    https://download.csdn.net/download/royal1235/11649854

    感兴趣的小伙伴可以扫码关注下公众号哦,公众号会分享高质量的技术文章哦

     

    展开全文
  • 搜索框实例绑定提交事件是一款下拉选择多种搜索引擎分类搜索框输入文字键盘回车绑定提交搜索按钮代码。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,911
精华内容 4,364
关键字:

jquery分类搜索