JAVAWeb搜尋時自動補全和模糊查詢
阿新 • • 發佈:2018-11-27
版權宣告:本文為博主原創文章,未經博主允許不得轉載!https://blog.csdn.net/qq_40348465/article/details/83870553
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);