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

html

		

													
													
													

														
													
上一页||下一页
													
													

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

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