input实现与后台的模糊查询分页和数据的交互

怼烎@ 2021-11-16 07:06 326阅读 0赞

## html ##

<div class="input-box ">
    													<input type="text" class="input form-control" id="companyUnitName" name="companyUnitName"  value="" onkeyup="selName()"/>
    													<span class="tip-l"></span>
    													<ul class="dropdown">
    														
    													<div class="needhide"><a  href="javascript:void(0);" onclick="pre()">上一页</a>||<a href="javascript:void(0);"  onclick="next()">下一页</a></div>
    													</ul>
    													</div>

## css实现位置等控制 ##

.input-box {
          position: relative;
          display: inline-block;
        }
        
        .input-box input {
          background-color: transparent;
          background-image: none;
          border: 1px solid #ccc;
          border-radius: 4px;
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
          color: #555;
          display: block;
          font-size: 14px;
    	width: 300px;
          padding: 6px 6px;
          transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
        
          display: inline;
          position: relative;
          z-index: 1;
        }
        
        .tip-l {
          width: 0;
          height: 0;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 10px solid #555;
          display: inline-block;
          right: 10px;
          z-index: 0;
          position: absolute;
          top: 12px;
        }
        
        .dropdown {
          position: absolute;
          top: 32px;
          left: 0px;
          width: 300px;
          background-color: #FFF;
          border: 1px solid #23a8ce;
          border-top: 0;
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
          z-index: 999;
          padding: 0;
          margin: 0;
        }
        
        .dropdown li {
          display: block;
          line-height: 1.42857;
          padding: 0 6px;
          min-height: 1.2em;
          cursor: pointer;
        }
        
        .dropdown li:hover {
          background-color: #23a8ce;
          color: #FFF;
        }

## js实现显示效果控制 ##

var isBox = false; // 定义一个触发焦点事件的开关，默认为不开启状态 || 也可以给input设置一个属性，来判断
        $(".dropdown").hide(); 
    	$(".needhide").hide();
        $(".input").focus(function () { // input绑定焦点事件，触发时打开焦点开关
          $(this).siblings(".dropdown").show(); 
          isBox = true;
        });
        $(".input-box").mousemove(function () { // 鼠标进入input-box区域内打开焦点开关
          isBox = true;
        });
        $(".input-box").mouseout(function () { // 鼠标离开input-box区域内关闭焦点开关
          isBox = false;
        });
        $(".input").blur(function () { // input失去焦点时通过焦点开关状态判断鼠标所在区域
          if (isBox == true) return false;
          $(this).siblings(".dropdown").hide();
        });

## 下面是重点了，事件的编写和ajax的交互 ##

function selName(){
     // $("#companyUnitName").val($("#sel_menu option:selected").text());
     $(".needhide").show();
     pageNo=1;
     	$.myAjax({
     		url: "http://192.168.1.108:8888/unit/findCompanyUnitsByUnitName.action",
     		type: "POST",
     		data:{unitName:$('#companyUnitName').val(),pageNo:1,pageSize:10},
     		dataType: "json",
     		async: false,
     		success: function(res) {
     			if(res.resultCode==200){
    				const ul=document.getElementsByClassName('dropdown')[0];  //获得要操作的元素
    				var list = ul.querySelectorAll("li");		//获得其中已经存在的li
    				for(let i=0;i<list.length;i++){				//遍历删除（防止重复，每次都会清楚）
    					list[i].remove();
    				}
     				for(let a=0;a<res.resultData.length;a++){   //将查询到的数据写入到操作元素中，这里使用tag存放必要信息
    					const li=document.createElement('li');
    					li.className='remove';
    					li.tagName=res.resultData[a].unitId;
    					li.innerHTML=res.resultData[a].unitName;
    					ul.appendChild(li);
     				}
    				   $(".dropdown").find('li').each(function () { // 传值给input，同时关闭焦点开关
    				  $(this).on("click", function () {    //点击事件给对应的input赋值（需要用到tag中的信息在提交的时候传递给后台）
    				    isBox = false;
    				    var text = $(this).text();
    				    $(this).parent().siblings(".input").val(text);
    				    $(this).siblings(".dropdown").hide();
    					$('#companyUnitId').val(this.getAttribute("tag"));  //获取点击的li中的tag给对应input赋值
    					 $(".dropdown").hide();
    				  })
    				})
     			}
     		}
     	});
    }

剩余的上一页下一页的方法基本一致，需要对pageNo进行操作。

发表评论取消回复

表情：

评论列表（有 0 条评论，326人围观）

还没有评论，来说两句吧...

相关阅读

相关模糊查询 + 分页有坑！

前言不知道你有没有使用过`Mysql`的`like`语句，进行`模糊`查询？不知道你有没有将查询结果，进行`分页`处理？模糊查询，加上分页处理，会有意想不到的坑

朴灿烈づ我的快乐病毒、/ 2024年04月06日 09:26/ 0 赞/ 64 阅读

相关模糊分页、模糊查询分页

一、html页面分页 <div> <nav aria-label="..."> <ul class="pager"

r囧r小猫/ 2023年10月11日 22:03/ 0 赞/ 69 阅读

相关 uni-app查询云数据库数据实现分页以及模糊查询

> 使用element ui分页组件 > 别的分页组件原理相同 > `未经本人允许，禁止转载` 分页分页功能很简单如下就能实现 let dataes

￡神魔★判官ぃ/ 2022年11月12日 04:21/ 0 赞/ 352 阅读

相关 MVC与EF_模糊查询和分页

注：ot 是我的EF变量名称一、分页DAL代码： ot.Eemail.Where(a => a.userid\_s == \_ua.Login\_nam

落日映苍穹つ/ 2022年07月14日 08:07/ 0 赞/ 335 阅读

相关 SpringMVC与前/后台的json数据交互

json数据格式在接口调用中、html页面中比较常用，json格式比较简单，解析也比较方便，所以使用很普遍。在SpringMVC中，也支持对json数据的解析和转换，这篇文章主

缺乏、安全感/ 2022年06月02日 22:24/ 0 赞/ 228 阅读

相关 Hibernate5-分页查询与模糊查询

[https://www.itency.com/topic/show.do?id=457347][https_www.itency.com_topic_show.do_id_4

「爱情、让人受尽委屈。」/ 2022年05月16日 15:57/ 0 赞/ 325 阅读

相关 yii2实现后端分页和模糊查询

注：这里说的是前后端分离的方式，前端可以用vue+element,不管用什么，只要能把需要的参数传给后端就OK 1.前端需要传的主要参数包括： listQuery:

男娘i/ 2021年12月10日 10:39/ 0 赞/ 548 阅读

相关 input实现与后台的模糊查询分页和数据的交互

html <div class="input-box "> <input type="text" class="input fo

怼烎@/ 2021年11月16日 07:06/ 0 赞/ 327 阅读

相关分页查询+list集合模糊查询

分页查询： public List<DoorEventsVo> pageList(List<Object> dataList, int pageSize, int

逃离我推掉我的手/ 2021年09月02日 06:42/ 0 赞/ 637 阅读

相关 Python 实现js与Django后台的前后台交互

背景： python小白准备用python写个后台项目，前后台交互的时间遇到一些问题，记录如下：代码结构：目录结构： watermark_type_ZmFuZ3p...

浅浅的花香味﹌/ 2021年05月18日 15:39/ 0 赞/ 636 阅读