1.搜索自动补全
(1)JSP代码
此处需要导入jquery-ui.css,jquery-3.3.1.min.js,jquery-ui.js这三个文件
<link rel="stylesheet" href="jqueryui/jquery-ui.css">
<script src="jquery/jquery-3.3.1.min.js"></script>
<script src="jqueryui/jquery-ui.js"></script>
<script type="text/javascript">
$( function() {
$.get("GetBook.do?getBookParam=autocomplete",function(data,status){
//eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
//此处eval()的作用是:将JSON字符串形式转换为对象的形式。(因为此处Servlet中是以text/html的形式传过来的)
var availableTags =eval(data);
$( "#tags" ).autocomplete({
source: availableTags
});
});
} );
</script>
搜索框和搜索按钮
<div class="ui-widget">
<label for="tags">搜索: </label> <input id="tags" placeholder="请输入图书名">
<input type="button" class="btn btn-success" value="Searche" onclick="search()">
</div>
(2)Servlet代码
这里涉及到将JAVA对象数组转换为JSON对象数组,所以需要导入相关的包
关于其他转换可以参考:https://blog.csdn.net/qq_40348465/article/details/83796363
//获取所有的book信息,此处可以改为直接获取所有的书名
List<Book> books = bookService.getAllBook();
//获取所有的书名
String names[] =new String[books.size()];
for (int i=0;i<books.size();i++) {
names[i]=books.get(i).getTitle();
}
//先转化为json对象数组,然后再将JSON对象数组转字符串输出
String json4= JSONArray.fromObject(names).toString();
System.out.println(json4);
//响应输出
response.getWriter().print(json4);
2.模糊查询
(1)JSP中为上面的搜索按钮绑定点击事件
注意window.location.href中存在中文乱码的问题,所以需要对JSP中的url和Servlet中接收的值均做处理,这里已经处理过了,另一种处理方法可参考:https://blog.csdn.net/qq_40348465/article/details/83870127
function search(){
alert("这里是search()函数");
var searchtxt = encodeURI(document.getElementById("tags").value) ;
searchtxt = $.trim(searchtxt);
if (searchtxt != "") {
alert("searchtxt:"+searchtxt);
window.location.href="GetBook.do?getBookParam=searchByName&searchtxt="+searchtxt;
}else{
alert("请输入书名或其关键字");
}
}
(2)Servlet代码
String title = request.getParameter("searchtxt");
String str=new String(title.getBytes("ISO-8859-1"),"UTF-8");
//String str = java.net.URLDecoder.decode(title, "utf-8");
List<Book> books = bookService.getBooksByTitle(title);
request.setAttribute("BOOKS", books);
request.getRequestDispatcher("bookShow.jsp").forward(request, response);