1. 程式人生 > >JAVAWeb搜尋時自動補全和模糊查詢

JAVAWeb搜尋時自動補全和模糊查詢

版權宣告:本文為博主原創文章,未經博主允許不得轉載!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);