搜索时,根据输入的关键字显示所有相关信息。

[b]1:js [/b]

/搜索部门
function fn_list_user(u){
$("#u_list").css("display","block");
if(u.value!=''){
jQuery.ajaxSetup ({cache:false});
$.post("announceTaskAction!listByFsName.action",{deptName:u.value},function(data){
$("#u_list").html("<ul style='margin-left:3px;'>"+data+"</ul>");
});
}
}

function fn_set_user(launchDep,deptId){
$("#launchDep").val(launchDep);
$("#deptId").val(deptId);
$("#u_list").css("display","none");
$("#u_list").html("");
}
function fn_b(){
if($("#launchDep").val()==""){
$("#u_list").css("display","none");
$("#deptId").val("");
}
}

function fn_s(str){
with(pos(str)){
$("#u_list").css("left",Left + "px");
$("#u_list").css("top",Top + 20+ "px");
if(str.value!=""){
$("#u_list").css("display","block");
}
}
}

var pos=function(str){
//获取元素绝对位置
var Left=0,Top=0;
do{Left+=str.offsetLeft,Top+=str.offsetTop;}
while(str=str.offsetParent);
return {"Left":Left,"Top":Top};
}

[b]2:html[/b]
<div id="u_list"></div>
<input type="text" class="not_null" style="width:108px;" οnfοcus="fn_s(this)" οnblur="fn_b();" οnkeyup="fn_list_user(this);" id="launchDep"/>

[b]3:css[/b]
<style type="text/css">
#u_list{position:absolute; width:122px;right:230px; text-align:left; border: 1px solid #000;BACKGROUND-COLOR: #fff;display:none; z-index:9999;overflow-y:auto;height:250px;}
</style>

[b]4:action[/b]

//模糊查找部门信息
public void listByFsName(){
PrintWriter out = null;
String deptName = request.getParameter("deptName");
if(StringUtils.isNotBlank(deptName)){
try {
out = response.getWriter();
List<Object> deptList = annTaskInfoService.queryDeptInfo(deptName);
StringBuffer buffer = new StringBuffer();
if(deptList.size()>0){
for(int i=0;i<deptList.size();i++){
Object[] deptInfo = (Object[])deptList.get(i);
String trcss = i%2==0?"li_2":"li_1";
buffer.append("<li class='"+trcss+"'><a href='javascript:void(0);' οnclick='fn_set_user(\""+deptInfo[2]+"\",\""+deptInfo[0]+"\");return false;' style='cursor:pointer'>"+deptInfo[2]+"</a></li>");
}
out.write(buffer.toString());
}else{
out.write("<li><span>没有此部门</span></li>");
}
} catch (Exception e) {
out.write("<li><span>没有此部门</span></li>");
}
}
}
好的,我会尽力回答你的问题。首先,你需要在后端使用SpringBoot和SSM框架,编写一个Controller接受前端传来的关键字,然后调用Service层进行模糊查询操作,最后将查询结果返回给前端。 以下是一些实现步骤: 1. 定义实体类和DAO层接口,与数据库表对应。 ``` @Entity @Table(name = "table_name") public class EntityName { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String field1; private String field2; private String field3; private String field4; private String field5; private String field6; private String field7; private String field8; private String field9; // getter和setter方法 } public interface EntityNameDAO { List<EntityName> findByKeyword(String keyword); } ``` 2. 在Service层中编写模糊查询方法。 ``` @Service public class EntityNameServiceImpl implements EntityNameService { @Autowired private EntityNameDAO entityNameDAO; @Override public List<EntityName> findByKeyword(String keyword) { return entityNameDAO.findByKeyword(keyword); } } ``` 3. 在Controller层中编写接口,接收前端传来的关键字,并调用Service层进行模糊查询操作。 ``` @RestController @RequestMapping("/api") public class EntityNameController { @Autowired private EntityNameService entityNameService; @GetMapping("/search") public List<EntityName> search(@RequestParam("keyword") String keyword) { return entityNameService.findByKeyword(keyword); } } ``` 4. 在前端编写页面,包含搜索框和显示查询结果的表格。 ``` <form id="search-form"> <input type="text" name="keyword" placeholder="请输入关键字"> <button type="submit">搜索</button> </form> <table> <thead> <tr> <th>字段1</th> <th>字段2</th> <th>字段3</th> <th>字段4</th> <th>字段5</th> <th>字段6</th> <th>字段7</th> <th>字段8</th> <th>字段9</th> </tr> </thead> <tbody id="search-result"></tbody> </table> ``` 5. 在前端编写JavaScript代码,使用Ajax发送搜索请求,并将查询结果显示在表格中。 ``` $(function() { $('#search-form').submit(function(e) { e.preventDefault(); var keyword = $('input[name="keyword"]').val(); $.ajax({ url: '/api/search?keyword=' + keyword, type: 'GET', success: function(data) { var html = ''; $.each(data, function(index, item) { html += '<tr>'; html += '<td>' + item.field1 + '</td>'; html += '<td>' + item.field2 + '</td>'; html += '<td>' + item.field3 + '</td>'; html += '<td>' + item.field4 + '</td>'; html += '<td>' + item.field5 + '</td>'; html += '<td>' + item.field6 + '</td>'; html += '<td>' + item.field7 + '</td>'; html += '<td>' + item.field8 + '</td>'; html += '<td>' + item.field9 + '</td>'; html += '</tr>'; }); $('#search-result').html(html); } }); }); }); ``` 以上是一个简单的JavaWeb查询系统的实现步骤,你可以根据自己的需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值