精华内容
下载资源
问答
  • 主要介绍了jQuery实现模糊查询的方法,结合实例形式分析了jQuery事件响应、节点遍历、查询匹配、属性修改等相关操作技巧,需要的朋友可以参考下
  • 一个带下拉模糊搜索的select,替换下拉内容后即可直接使用,只需要把对应文件放到指定文件夹中引用即可
  • jQuery模糊搜索框下拉选择代码是一款模糊搜索组件,点击搜索框文本下拉框提示效果。
  • 本地实现了一个搜索框自动补全的小功能,在JQuery UI的autocomplete插件的基础上,加入了自己的业务代码,贴出来回顾一下,同时可以给大家一个参考 首先贴出的是JQuery Ui 的自动补全插件部分的代码,后面的功能都是在其...
  • jQuery支持模糊查询下拉框菜单选择代码
  • //搜索框的值    $.ajax({  type: 'post',  url: '${ctx}/orders/getUserFirmList?type='+type+'&userTempField2='+userTempField2+'',  dataType:'json',  data: {  q:currentValue  },  success...

    1.html/jsp 部分
    <div class="layui-input-inline">
           <input id="orderField3" name="orderField3" autocomplete="off" οnclick="findUserWeiAndCheng('orderField3','auto_div_orderField3','firm','1')" οninput="findUserWeiAndCheng('orderField3','auto_div_orderField3','firm','1')"/>
    </div>
    <div id="auto_div_orderField3" class="nowep" style="top: 35px;position: absolute; width: max-content;width: -webkit-max-content;z-index:9999;left: 84px;background: rgb(246,248,252);border: 0px solid rgb(211,211,217); height:180px ;overflow-y:auto;"></div>
                                    
       2. js部分                             
                //type,userTempField2 为参数可不要                    
                function findUserWeiAndCheng(idvalue,autoDiv,type,userTempField2) {
                var currentValue = document.getElementById(idvalue).value;//搜索框的值
          
                $.ajax({
                    type: 'post',
                    url: '${ctx}/orders/getUserFirmList?type='+type+'&userTempField2='+userTempField2+'',
                    dataType:'json',
                    data: {
                        q:currentValue
                    },
                    success: function(res){
                        var data=res.data;
                        console.log(data);
                        if(res.data!=null){
                            var data = res.data;
                            var addressArr=new Array();
                            if(data!=null && data.length>0){
                                for(var i=0;i<data.length;i++){
                                    // addressArr.push(data[i].["'+showText+'"]);
                                    addressArr.push(data[i].firmName);//返回的对象集合list其中的某一个字段 转化为数组
                                }
                                //idvalue  input 的id,autoDiv html要展示的div的id,addressArr,data按需要传的数据 这里data 是后台返回的所有数据,方便一些
                                AutoWeiAndChengComplete(autoDiv,idvalue, addressArr,data);
                            }
                        }
                    }
                })
            }
            var old_value = "";
            var weiandchenghighlightindex = -1;   //高亮带隐藏值 
            //idvalue  input 的id,autoDiv html要展示的div的id,addressArr,data按需要传的数据 这里data 是后台返回的所有数据,方便一些
                function AutoWeiAndChengComplete(auto, search, mylist,data) {
                // if ($("#" + search).val() != "") {
                var autoNode = $("#" + auto);   //缓存对象(弹出框)
                old_value = $("#" + search).val();
                if (mylist.length == 0) {
                    autoNode.hide();
                    return;
                }
                var userMobile=$("#userMobile").val();//当前用户手机号
                autoNode.empty();  //清空上次的记录
                for (var i in mylist) {
                    var newDivNode = $("<div>").attr("id", i);    //设置每个节点的id值
                    //按需要设置每行的样式
                    if(null!=data[i].userIsMaster && ''!=data[i].userIsMaster && data[i].userIsMaster=='2'){
                          newDivNode.attr("style", "color: forestgreen;font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;background-color:rgb(246, 248, 252)");
                    }else if(null!=userMobile && null!=data[i].mobile && ''!=data[i].mobile && data[i].mobile==userMobile){
                          newDivNode.attr("style", "color: crimson;font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;background-color:rgb(246, 248, 252)");
                    }else{
                          newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;background-color:rgb(246, 248, 252)");
                    }
                    var wordNode = mylist[i];   //弹出框里的每一条内容
                    newDivNode.html(wordNode).appendTo(autoNode);  //追加到弹出框
                    //鼠标移入高亮,移开不高亮
                    newDivNode.mouseover(function () {
                        if (weiandchenghighlightindex != -1) {        //原来高亮的i节点要取消高亮(是-1就不需要了)
                            autoNode.children("div").eq(weiandchenghighlightindex).css("background-color", "rgb(246, 248, 252)");
                        }
                        //记录新的高亮节点索引
                        weiandchenghighlightindex = $(this).attr("id");
                        $(this).css("background-color", "#ebebeb");
                    });
                    newDivNode.mouseout(function () {
                        $(this).css("background-color", "rgb(246, 248, 252)");
                    });
                    //鼠标点击文字上屏
                    newDivNode.click(function () {
                        var orderField3Obj=data[weiandchenghighlightindex];//得到对象
              
                        //取出高亮节点的文本内容
                        var comText = autoNode.hide().children("div").eq(weiandchenghighlightindex).text();
                        weiandchenghighlightindex = -1;
                        //文本框中的内容变成高亮节点的内容
                             $("#" + search).val(comText);
                       
                    })

                    if (mylist.length > 0) {    //如果返回值有内容就显示出来
                        autoNode.show();
                    } else {               //服务器端无内容返回 那么隐藏弹出框
                        autoNode.hide();
                        //弹出框隐藏的同时,高亮节点索引值也变成-1
                        weiandchenghighlightindex = -1;
                    }
                }

                //点击页面隐藏自动补全提示框
                document.onclick = function (e) {
                    var e = e ? e : window.event;
                    var tar = e.srcElement || e.target;
                    if (tar.id != search) {
                        if ($("#" + auto).is(":visible")) {
                            $("#" + auto).css("display", "none")
                        }
                    }
                }
            }

     

    展开全文
  • Jquery select模糊查询

    2020-11-22 15:22:58
    模糊搜索 下拉列表(单选) 带搜索功能的下拉列表,优雅、简单,保存记录一下。 引入jquery包 <script src="../js/jquery-3.3.1.min.js"></script> 引入js文件、css样式文件 <script src="../js...

    模糊搜索 下拉列表(单选)

    带搜索功能的下拉列表,优雅、简单,保存记录一下。

    • 引入jquery包

    <script src="../js/jquery-3.3.1.min.js"></script>

    • 引入js文件、css样式文件

    <script src="../js/jquery.searchableSelect.js"></script>
    <link rel="stylesheet" href="../css/jquery.searchableSelect.css" />

    • 调用 searchableSelect()函数
      <script> $('#selectUser').searchableSelect(); </script>

    测试文件

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="../js/jquery-3.3.1.min.js"></script>
    		<script src="../js/jquery.searchableSelect.js"></script>
    		<link rel="stylesheet" href="../css/jquery.searchableSelect.css" />
    	</head>
    	<body>
    		<div id="ss">
    			<select id="selectUser">
    				<option value="1">张三</option>
    				<option value="2">李四</option>
    				<option value="3">王五</option>
    				<option value="4">赵六</option>
    			</select>
    		</div>
    		<script>
    			$('#selectUser').searchableSelect();
    		</script>
    	</body>
    </html>
    

    效果图

    在这里插入图片描述
    文件下载地址:https://pan.baidu.com/s/1FYKisPL_PcilPAQ58dBd4A
    提取码:3snl

    PS:11-26补充 在实际使用时遇到两个问题,附上解决方案

    问题1:

    • 下拉列表被下方的html遮挡。
      在这里插入图片描述

    解决方案

    • 在这里插入图片描述

    问题二

    • 下方的下拉列表被已有模板遮挡,导致有三行数据显示不出来。
    <style>
        .searchable-select-items {
            max-height: 300px; //调整原有的400px改成300px或者更小一点
            overflow-y: scroll;
            position: relative;
        }
    </style>
    

    模糊搜索 下拉列表(多选)

    效果图

    在这里插入图片描述
    文件下载地址:https://pan.baidu.com/s/1b0El6_K__nUZV2Q9AMS15w
    提取码:7oay

    展开全文
  • jQuery搜索框输入下拉文字高亮代码是一款搜索框输入文字标题进行模糊搜索,输入关键字,高亮显示关键字代码
  • 前台select框模糊查询方法 可以实现多选以及模糊匹配 可以调高查找效率
  • jquery插件模糊查询的文本框

    热门讨论 2011-07-26 00:47:51
    jquery的一个插件 文本框的糊查询,支持本地数据源和ajax异步数据请求 支持文本框的状态,如果不是手工输入,而是通过选择到文本框的值,将可取到selected属性为true 解决IE下div不能挡住select object flash等的...
  • Chosen:select下拉选择美化插件及实现模糊搜索,Chosen 是一个支持jQuery的select下拉框美化插件,它能让丑陋的、很长的select选择变的更好看、更方便。不仅如此,它更扩展了select,增加了自动筛选的功能。它...
  • 使用jQuery实现实时模糊查询功能

    千次阅读 2017-06-07 18:14:15
    使用jQuery实现实时模糊查询功能

    先说一下模糊查询 在方法上写的SQL是跟数据库里边的不一样,这里果断入坑了。

    来个MySQL例子:

    模糊查询user中的name: select * from user where name like ‘%你想查的数据%’;

    在SSM里这样写会出错,如下:

    Parameter index out of range (1 > number of parameters, which is 0).

    正确写法: @Select(“select * from user where name like CONCAT(‘%’,#{name},’%’)”) 里边的#{name}就是你想查的数据

    上代码

    mapper.java

    //查询所有帖子列表 (统计回复 top/ 时间降序  limit 20)
        @Select("select count(rp.rcontent) as replyNum,p.*,u.user_name from t_posts p left  join t_user u on u.user_id=p.user_id left join t_rpost rp on p.id=rp.post_id group by p.id order by p.top desc,p.starttime desc limit 20")
        List<Posts> getPostListLimit();
    
    
    //根据帖子标题模糊查询 (降序)
        @Select("select count(rp.rcontent) as replyNum,p.*,u.user_name from t_posts p left  join t_user u on u.user_id=p.user_id left join t_rpost rp on p.id=rp.post_id where p.title like CONCAT('%',#{title},'%') group by p.id order by p.top desc,p.starttime desc")
        List<Posts> queryByTitle(String title);

    service.java

    //首页  获取帖子列表
        public List<Posts> getPostListLimit(){
            List<Posts> PostsList= mapper.getPostListLimit();
            return PostsList;
        }
    
    
    //模糊查询帖子标题
        public List<Posts> getPostsByTitle(String title){
            return mapper.queryByTitle(title);
        }

    controller.java

        //跳转到帖子主页列表
        @RequestMapping(value="getPostsIndex")
        public String getPostsIndex(){
            return "post/postsIndex";
        }
    
    
        //首页  获取前二十条帖子列表
        @RequestMapping(value="getPostListLimit",method=RequestMethod.POST)
        @ResponseBody
        public List<Posts> getPostListLimit(){
            return service.getPostListLimit();
        }
    
    
    //模糊查询帖子标题
        @RequestMapping(value="getPostsByTitle",method=RequestMethod.POST)
        @ResponseBody
        public List<Posts> getPostsByTitle(@Param("title")String title){
            return service.getPostsByTitle(title);
        }

    jsp页面 (只有相关部分):

    JS/CSS:

    <script type="text/javascript" src="${ctxStatic}/jquery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="${ctxStatic}/layui/res/layui/layui.js"></script>
    <script type="text/javascript" src="${ctxStatic}/laypage/laypage.js"></script>
    <link rel="stylesheet" href="${ctxStatic}/laypage/skin/laypage.css"/>
    <link rel="stylesheet" href="${ctxStatic}/layui/res/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxStatic}/layui/res/css/global.css"/>
    

    DIV:

    
        <div class="content">
          <div class="fly-tab fly-tab-index">
            <span>
              <a href="${ctx}/getAllPostsIndex">全部</a>
              <a href="jie/index.html">未结帖</a>
              <a href="jie/index.html">已采纳</a>
              <a href="jie/index.html">精帖</a>
              <a href="${ctx}/getPostUserHome">我的帖</a>
            </span>
            <div class="fly-search">
              <!-- <button class="iconfont icon-sousuo"></button> -->
              <input class="layui-input" placeholder="请输入标题关键字。。。" id="search">
           </div>
            <a href="${ctx}/addPostInput" class="layui-btn jie-add">发布问题</a>
          </div>
            <ul class="fly-list" id="result">
    
            </ul>
    
          <!-- 置顶/加精 -->
            <ul class="fly-list-top" id="top_list">
    
            </ul>
          <!-- 普通帖 -->
            <ul class="fly-list" id="_list">
    
            </ul>
    
            <!-- 分页div -->  
          <div id="fenye" style="text-align: center;margin: 0 auto;">
                <div class="page_list">
    
                </div>
          </div>
    
            <!-- <ul id="biuuu_city_list" class="fly-list"></ul>
    
            <div id="biuuu_city" style="text-align: center;"></div> -->
    
          <div style="text-align: center" id="gengduo">
            <div class="laypage-main">
              <a href="${ctx}/getAllPostsIndex" class="laypage-next">更多求解</a>
            </div>
          </div>
        </div>
    

    jQuery+Ajax: /加载主页列表/

    
    
    <script type="text/javascript">
            $(document).ready(function(){
                $('#result').empty().hide();
                $.ajax({
                    method:'post',
                    url:'${ctx}/getPostListLimit',
                    dataType:'json',
                    success:function(data){
                            if(data.length>0){
                                for(var i=0;i<data.length;i++){
                                    if(data[i].top==1&&data[i].nice==1){
                                        var html='<li class="fly-list-li">'
                                            +'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">'
                                            +'<img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0"></img>'
                                            +'</a>'
                                            +'<h2 class="fly-tip">'
                                            +'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'
                                            +'<span class="fly-tip-stick">置顶</span>'
                                            +'<span class="fly-tip-jing">精帖</span>'
                                            +'</h2>'
                                            +'<p>'
                                            +'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'
                                            +'<span>'+data[i].starttime+'</span>'
                                            +'<span>layui框架综合</span>'
                                            +'<span class="fly-list-hint">' 
                                            +'<i class="iconfont" title="回答">&#xe60c;</i> '+data[i].replyNum+''
                                            +'<i class="iconfont" title="人气">&#xe60b;</i> '+data[i].view+''
                                            +'</span>'
                                            +'</p>'
                                            +'</li>';
                                        $('#top_list').append(html);
                                    }
                                    if(data[i].top==1&&data[i].nice==0){
                                        /* 置顶帖  */
                                        var html1='<li class="fly-list-li">'
                                            +'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">'
                                            +'<img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0"></img>'
                                            +'</a>'
                                            +'<h2 class="fly-tip">'
                                            +'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'
                                            +'<span class="fly-tip-stick">置顶</span>'
                                            //+'<span class="fly-tip-jing">精帖</span>'
                                            +'</h2>'
                                            +'<p>'
                                            +'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'
                                            +'<span>'+data[i].starttime+'</span>'
                                            +'<span>layui框架综合</span>'
                                            +'<span class="fly-list-hint">' 
                                            +'<i class="iconfont" title="回答">&#xe60c;</i> '+data[i].replyNum+''
                                            +'<i class="iconfont" title="人气">&#xe60b;</i> '+data[i].view+''
                                            +'</span>'
                                            +'</p>'
                                            +'</li>';
                                        $('#top_list').append(html1);
                                    }
                                    if(data[i].top==0&&data[i].nice==1){
                                        /* 加精帖  */
                                        var html2='<li class="fly-list-li">'
                                            +'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">'
                                            +'<img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0" alt="">'
                                            +'</a>'
                                            +'<h2 class="fly-tip">'
                                            +'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'
                                            //+'<span class="fly-tip-stick">置顶</span>'
                                            +'<span class="fly-tip-jing">精帖</span>'
                                            +'</h2>'
                                            +'<p>'
                                            +'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'
                                            +'<span>'+data[i].starttime+'</span>'
                                            +'<span>layui框架综合</span>'
                                            +'<span class="fly-list-hint">' 
                                            +'<i class="iconfont" title="回答">&#xe60c;</i> '+data[i].replyNum+''
                                            +'<i class="iconfont" title="人气">&#xe60b;</i>'+data[i].view+''
                                            +'</span>'
                                            +'</p>'
                                            +'</li>';
                                        $('#_list').append(html2);
                                    }
                                    if(data[i].top==0&&data[i].nice==0){
                                        /* 普通帖  */
                                        var html3='<li class="fly-list-li">'
                                            +'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">'
                                            +' <img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0" alt="">'
                                            +'</a>'
                                            +'<h2 class="fly-tip">'
                                            +'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'
                                            +'</h2>'
                                            +'<p>'
                                            +'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'
                                            +'<span>'+data[i].starttime+'</span>'
                                            +'<span>layui框架综合</span>'
                                            +'<span class="fly-list-hint"> '
                                            +'<i class="iconfont" title="回答">&#xe60c;</i> '+data[i].replyNum+''
                                            +'<i class="iconfont" title="人气">&#xe60b;</i>'+data[i].view+''
                                            +'</span>'
                                            +'</p>'
                                            +'</li>';
                                        $('#_list').append(html3);
                                        }
    
                                }
                            }else{
                                //layer.msg("无数据信息!",{time:1500});
                                var html='<div class="fly-none">并无相关数据</div>';
                                $('.fly-list').append(html);
                            }
                    },
                    error:function(data){
                        layer.msg("数据加载失败,错误信息:"+JSON.stringify(data),{time:10000});
                    }
                })  
            })
         </script>

    /加载实时搜索和分页/

    <script type="text/javascript">
    
    //搜索
    
    $('#search').bind('input propertychange',function(){ 
        $('#_list').empty().hide();
        $('#top_list').empty().hide();
        $('#gengduo').hide();
        var input="";
        $('#result').empty().show();
       input =$('#search').val();
        if(input.length<0||input==null||input==""){
    
            $('#result').empty();
      } 
      $.ajax({
        method:'post',
        url:'${ctx}/getPostsByTitle?title='+input,
        dataType:'json',
        success:function(data){
            if(data.length>0){
    
                var nums = 10; //每页出现的数量
                var pages = Math.ceil((data.length)/nums); //得到总页数
                var thisDate = function(curr){
                    //此处只是演示,实际场景通常是返回已经当前页已经分组好的数据
                    last = curr*nums - 1;
                    var str=""; var str1="";var str2="";var str3="";
                    last = last >= data.length ? (data.length-1) : last;
                for(var i = (curr*nums - nums); i <= last; i++){
                /* for(var i=0;i<data.length;i++){ */
                    if(data[i].top==1&&data[i].nice==1){
                        str+='<li class="fly-list-li">'
                            +'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">'
                            +'<img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0"></img>'
                            +'</a>'
                            +'<h2 class="fly-tip">'
                            +'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'
                            +'<span class="fly-tip-stick">置顶</span>'
                            +'<span class="fly-tip-jing">精帖</span>'
                            +'</h2>'
                            +'<p>'
                            +'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'
                            +'<span>'+data[i].starttime+'</span>'
                            +'<span>layui框架综合</span>'
                            +'<span class="fly-list-hint">' 
                            +'<i class="iconfont" title="回答">&#xe60c;</i> '+data[i].replyNum+''
                            +'<i class="iconfont" title="人气">&#xe60b;</i> '+data[i].view+''
                            +'</span>'
                            +'</p>'
                            +'</li>';
    
                        //$('#result').append(html);
                    }
                    if(data[i].top==1&&data[i].nice==0){
                        /* 置顶帖  */
                        str1+='<li class="fly-list-li">'
                            +'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">'
                            +'<img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0"></img>'
                            +'</a>'
                            +'<h2 class="fly-tip">'
                            +'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'
                            +'<span class="fly-tip-stick">置顶</span>'
                            +'</h2>'
                            +'<p>'
                            +'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'
                            +'<span>'+data[i].starttime+'</span>'
                            +'<span>layui框架综合</span>'
                            +'<span class="fly-list-hint">' 
                            +'<i class="iconfont" title="回答">&#xe60c;</i> '+data[i].replyNum+''
                            +'<i class="iconfont" title="人气">&#xe60b;</i> '+data[i].view+''
                            +'</span>'
                            +'</p>'
                            +'</li>';
    
    
                    }
                    if(data[i].top==0&&data[i].nice==1){
                        /* 加精帖  */
                        str2+='<li class="fly-list-li">'
                            +'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">'
                            +'<img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0" alt="">'
                            +'</a>'
                            +'<h2 class="fly-tip">'
                            +'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'
                            +'<span class="fly-tip-jing">精帖</span>'
                            +'</h2>'
                            +'<p>'
                            +'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'
                            +'<span>'+data[i].starttime+'</span>'
                            +'<span>layui框架综合</span>'
                            +'<span class="fly-list-hint">' 
                            +'<i class="iconfont" title="回答">&#xe60c;</i> '+data[i].replyNum+''
                            +'<i class="iconfont" title="人气">&#xe60b;</i>'+data[i].view+''
                            +'</span>'
                            +'</p>'
                            +'</li>';
    
                    }
                    if(data[i].top==0&&data[i].nice==0){
                        /* 普通帖  */
                        str3+='<li class="fly-list-li">'
                            +'<a href="${ctx}/getPostUserHome?id='+data[i].user_id+'" class="fly-list-avatar">'
                            +' <img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0" alt="">'
                            +'</a>'
                            +'<h2 class="fly-tip">'
                            +'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'
                            +'</h2>'
                            +'<p>'
                            +'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'
                            +'<span>'+data[i].starttime+'</span>'
                            +'<span>layui框架综合</span>'
                            +'<span class="fly-list-hint"> '
                            +'<i class="iconfont" title="回答">&#xe60c;</i> '+data[i].replyNum+''
                            +'<i class="iconfont" title="人气">&#xe60b;</i>'+data[i].view+''
                            +'</span>'
                            +'</p>'
                            +'</li>';
    
                        }
                    }
                    return str+str1+str2+str3;
                };
    
                //调用分页
                laypage({
                    cont: $('.page_list'),
                    pages: pages, //总页数 
                    groups:3, //连续显示的分页数 
                   // skip:true,//是否显示跳转功能
                    skin:'#009688', //加载内置皮肤,也可以直接赋值16进制颜色值,如:#c00
                    jump: function(obj,first){
                        document.getElementById('result').innerHTML = thisDate(obj.curr); 
                    }
                })
    
            }else{
                var html='<div class="fly-none">并无相关数据</div>';
                    $('#top_list').empty().hide();
                    $('#_list').empty().hide();
                    $('#result').append(html);
            }
        },
        error:function(data){
            layer.msg('请求异常,请重试'+JSON.stringify(data), {shift: 6,time:3000});
        }
      })
     });        
    </script>

    搜索效果:

    这里写图片描述

    这里写图片描述

    随着你的输入直接显示搜索结果。

    当你清空搜索框时 直接加载所有数据 每十条数据为一页。

    展开全文
  • 搜索栏模糊查询特效--jquery插件

    千次阅读 2016-01-08 18:28:26
    以下是我在实际工作中给客户做的一个方便搜索的功能: 在工作中我们用的框架是ETP框架不是主流的SS框架(此处只是说明下,并不影响文章的主要内容,目的是为不知道ETP的人扫除阅读障碍),如代码中的  ...
    

    以下是我在实际工作中给客户做的一个方便搜索的功能:

    在工作中我们用的框架是ETP框架不是主流的SS框架(此处只是说明下,并不影响文章的主要内容,目的是为不知道ETP的人扫除阅读障碍),如代码中的

    <%
        IndexedCollection dealerInfoIColl = (IndexedCollection) transFlowCtx.getElementAt("dealerInfoIColl");//就是获取一个包含数据的集合dealerInfoIColl ,然后遍历出dealerName 如是而已
      for (int i = 0; i < dealerInfoIColl.size(); i++) {   
       KeyedCollection tempKColl = (KeyedCollection) dealerInfoIColl.getElementAt(i);
       String dealerName = (String) tempKColl.getValueAt("dealerName");
     %>


    附代码:

    <div class="">
       <td class="R Ltext" noWrap>经销商:</td>
       <td width="20%" nowrap ><input name="IN_DEALER_NAME" id="tags" value='<%=transFlowCtx.getValueAt("IN_DEALER_NAME")==null?"":transFlowCtx.getValueAt("IN_DEALER_NAME") %>' class="borderinput" type="text" style="width:180px;"/></td>
      </div>

    ==========================

    <%@ page language="java" contentType="text/html; charset=utf-8" %>
       <script type="text/javascript" src="<%=path%>res/jquery/jquery-1.7.2.min.js"></script>
     <script type="text/javascript" src="<%=path%>res/jquery/jquery-ui/js/jquery-ui-1.8.19.custom.min.js"></script>
     <link type="text/css" rel="stylesheet" href="<%=path%>res/jquery/jquery-ui/css/jquery-ui-1.8.19.custom.css" />
     <link type="text/css" rel="stylesheet" href="<%=path%>res/jquery/css/layout-default-latest.css" />
      <style>
        .ui-autocomplete {
          max-height: 100px;
          overflow-y: auto;
          /* 防止水平滚动条 */
          overflow-x: hidden;
        }
        /* IE 6 不支持 max-height
         * 我们使用 height 代替,但是这会强制菜单总是显示为那个高度
         */
        html .ui-autocomplete {
          height: 100px;
        }
       </style>
      

      <script type="text/javascript">
     
    $(function() {
        var availableTags = new Array();
      <%
        IndexedCollection dealerInfoIColl = (IndexedCollection) transFlowCtx.getElementAt("dealerInfoIColl");
      for (int i = 0; i < dealerInfoIColl.size(); i++) {
       KeyedCollection tempKColl = (KeyedCollection) dealerInfoIColl.getElementAt(i);
       String dealerName = (String) tempKColl.getValueAt("dealerName");
     %>
      availableTags.push('<%=dealerName%>');
        <%}%>
        $( "#tags" ).autocomplete({
          source: availableTags
        });
      });
     
      </script>


    另推荐两篇相关博客,以增进理解:http://blog.csdn.net/zhs954838550/article/details/8896965   http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/2534262.html

    展开全文
  • jQuery模糊查询的两种方法

    万次阅读 2017-09-19 17:08:33
    方法一:jQuery根据文本框输入实时模糊查询 HTML代码: 学号 姓名 性别 年龄 2014213840 张三 男 20 2014213841 李四 男 20 ...
  • 这是一款简洁美观的jQuery手机端下拉搜索框代码,点击导航图标顶部下拉滑动显示搜索框代码。
  • 使用Ajax动态执行模糊查询功能•必须:需要一个执行查询的接口:说明:1.搜索模块仅仅使用了boostrap的样式以及Jquery.js文件2.因为我使用的layui的弹出层里面做的搜索ifram,所以确定和取消按钮的关闭当前页面的...
  • 使用Ajax动态执行模糊查询功能 必须:需要一个执行查询的接口: 说明: 1.搜索模块仅仅使用了boostrap的样式以及Jquery.js文件 2.因为我使用的layui的弹出层里面做的搜索ifram,所以确定和取消按钮的关闭当前...
  • 如何实现 模糊搜索 当我们浏览网页的时候,通常能看到搜索栏,这大大的提高了我们获取数据的目的性。 那如何去实现一个简单的模糊搜索 呢,以下案例获取能给你一点思路。 以下案例,可以实现当按键按下时,自动...
  • jquery搜索结果带智能提醒的input插件searchableSelect.js下载地址
  • jQuery 如何实现 模糊搜索

    千次阅读 2019-05-04 22:35:12
    如何实现 模糊搜索 当我们浏览网页的时候,通常能看到搜索栏,这大大的提高了我们获取数据的目的性。 那如何去实现一个简单的模糊搜索 呢,以下案例获取能给你一点思路。 以下案例,可以实现当按键按下时,自动...
  • 1.html结构:/*查询结果放ul里面*/2.css样式:#searchShop{line-height:28px;text-indent:5px;width:180px;float:leftheight:28px;border:none;}.searchShopBtn{font-size:0;padding-left:15px;padding-right:15px;...
  • body {background-color:#f5f5f5;}.warp {width:50%;margin:0 auto;}/*清除input默认样式*/input {border:0;...}/*搜索栏*/.search_box {width:60%;height:32px;box-sizing:border-box;box-shadow:...
  • jQuery实现模糊查询

    千次阅读 2014-10-29 17:59:27
    今天做了一个类似从QQ群组选出成员的功能,要求能对群里面已有的成员实现模糊查询,但是后台接口不支持模糊查询,所以干脆在前台进行模糊查询,让能匹配到的群组成员显示,不能匹配的成员进行隐藏来达到模糊查询的...
  • jQuery搜索框输入文字下拉提示菜单(bootstrap风格)autocomplete
  • jquery 模糊查询下拉框

    2015-10-19 11:56:00
    &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;&lt;HTML&gt;&lt;HEAD&gt;&lt;TITLE&gt; xSelectList Demo &lt;/TITLE&...&
  • 搜索框模糊查询带下拉匹配效果html— <!------------搜索框模糊查询带下拉匹配效果html----------------------> <form action=# method=post name=searchform id=searchform class=searchinfo>
  • 输入车次、出发站、终点站、选择车票类型即可完成查询,注意本程序暂不支持模糊查询,你输入的字符必须和数据库中存储的字符完全一致,才能找到结果。  仅供学习Ajax的朋友参考,程序还有点粗糙。  
  • jquery.chosen.js查询时,chosen默认...若想实现中间字符的模糊查询,下面的js中(search_contains属性为true即可)可以让chosen搜索选项的中间及末尾字符 $('.chosen-select').chosen({ search_contains: true, });
  • 效果图模糊提示css代码基本上没什么设计,能用就好。#auto_div {position: absolute;z-index: 999;left: 0px;top: 33px;width: 468px;border: 1px solid #74c0f9;display: none;background: #FFF;}Jquery部分首先是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,924
精华内容 1,969
关键字:

jquery搜索框模糊查询