Javaweb-案例練習-2-給搜索框添加提示

凱哥java 凱哥java

給搜索框添加搜索提示功能

這篇來利用Ajax做一個給搜索框添加搜索提示的功能，這個我們在百度首頁，搜索框隨便輸入一個字符，就能彈出聯想自動，可供用戶選擇，這篇要做的就是這么一個場景。

需求

就是這么一個功能。

文件準備

需求中這個index.jsp中的搜索在我們原來項目中沒有這個代碼，所以這里先把這個素材拷貝進來。(具體素材在我這個項目github上有)

本篇主要是index.jsp和menu_search.jsp這兩個文件。在index.jsp中靜態包含了menu_search.jsp，代碼中%@include file="menu_search.jsp" % ，這行代碼就是我們前面學習JSP指令學習過的靜態包含，是在JSP轉換Servlet時引入的文件。

給搜索框添加信息提示框

在mene_search.jsp中，給搜索框先整出一個div框來，寬度和搜索框的寬度一樣，為了顯示明顯，先來給邊框添加紅色。

在menu_serch.jsp文件底部，添加一個div，代碼如下。

瀏覽器刷新，看看效果。

創建一個空的servlet文件

先創建一個SearchBookAJAXServlet.java,對應的url映射是/searchBookAJAXServlet

這部分代碼后面來寫。

Dao層代碼

在BookDao接口文件中，最底部添加這個代碼

public List searchBookByName(String name) throws SQLException;

在BookDaoImpl.java添加對應的具體方法實現代碼。

public List searchBookByName(String name) throws SQLException {

QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());

return qr.query("select name from book where name like ?", new ColumnListHandler(), "%" +name+"%");

}

Service層代碼

接著寫BookService.java中代碼，末尾新增以下代碼。

public List searchBookByName(String name);

然后具體實現代碼，在BookServiceImpl.java中末尾添加以下代碼。

public List searchBookByName(String name) {

try {

return bd.searchBookByName(name);

} catch (SQLException e) {

e.printStackTrace();

}

return null;

}

Servlet文件具體代碼

下面是SearchBookAJAXServlet.java的完整代碼。

部署測試

部署到tomcat,重啟tomcat服務。瀏覽器打開servlet地址，看看效果

https://localhost:8080/BookManagement/searchBookAJAXServlet?name=j

這里我數據庫看看是不是只有一個j開頭的，這樣我數據庫book表再添加一個javascript看看。

這樣就是說明代碼沒有問題了。

AJAX查詢結果顯示在div框中

下面我們來編輯menu_search.jsp文件，這里把文章開頭寫死div高度給刪除，新加了AJAX這一套代碼，代碼修改如下。

刷新瀏覽器，看看/index.jsp效果，搜索框輸入一個J看看,div框提示的效果。

到這里，還有問題沒有解決，那就是點擊div中提示，不能點擊，我們需要點擊之后，自動填充到search框。

Div中name鼠標懸停變顏色

就是在div提示的name，鼠標懸停，會自動變顏色，例如變成灰色，離開name區域變成原來的白色，來看看這個怎么實現。

上面改動地方在changeBackground_over(div) 和changeBackground_out(div)

刷新瀏覽器，看看效果。

鼠標懸停變成灰色，鼠標離開變成白色，對比看看上面改動的兩個這個動作的function就明白了。

解決點擊搜索按鈕，填充到搜索框

上面為止，我們做到了顏色變化，但是沒有點擊效果，而且 搜索框不輸入的時候，默認div顯示的是數據庫中全量數據的圖書name，這肯定不行。下面代碼調整之后，可以點擊填充到搜索框，和解決這個搜索框不輸入任何字符，提示全量name這個問題。

關于這個代碼最后div中，left和top的位置問題，會隨著不同瀏覽器和不同分辨率，這個紅色的div框位置有點偏移，這個問題，就不管了。

項目全部代碼請看github:

這篇代碼的commit message為 “搜索框提示并點擊填充完成 ”

總結

以上是生活随笔為你收集整理的java ajax搜索框提示,Javaweb-案例练习-2-给搜索框添加提示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。