基于jQuery使用Ajax动态执行模糊查询功能

使用Ajax动态执行模糊查询功能

•必须：需要一个执行查询的接口：

说明：

1.搜索模块仅仅使用了boostrap的样式以及Jquery.js文件

2.因为我使用的layui的弹出层里面做的搜索ifram，所以确定和取消按钮的关闭当前页面的功能都是layui的方式，如果不是ifram的窗口仅仅在当前窗口执行的情况下，可以使用下面的语句来进行关闭当前页面的操作：

 window.opener=null;
 window.open('','_self');
 window.close();

效果展示：

引用三方功能模块：

样式：

  
  #select_template_group{
   position: fixed;
   float: left;
   display: none;
  }
  .selected_keywords{
   display: none;
   position: fixed;
   width: 590px;
   max-height: 300px;
   margin-top: 35px;
   z-index: 10002;
  }
  .selected_keywords > ul{
   max-height: 300px;
   min-width: 590px;
   display: inline-block;
   overflow-y: scroll;
   overflow-x: hidden;
  }
  .list-group-item:hover{
   color: #2E2D3C;
   background: #00AAFF;
  }
  #basic-addon1 > img{
   width: 80%;
   height: 80%;
  }
 

HTML代码：

 
  
  
   
   
   
   
   
   
    
    
     
      


 选择模版
 
 
 



 
  
已选择模版
 
 



 
  确认
 


 
  取消
 

      
     
    
    
   
   
  
  
 
 

Javascript代码：

总结

以上所述是小编给大家介绍的基于jQuery使用Ajax动态执行模糊查询功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！