基于Prototype的文本框自動填充功能的實現

張玉葉

摘 要： 以醫院管理系統醫生開具藥方模塊中文本框自動填充功能的實現為例，詳細介紹了如何利用Prototype框架和基于文本的數據交換格式JSON實現文本框的自動填充功能，介紹了Prototype框架中實現AJAX的異步通信時用到的關鍵技術，給出了具體實現過程及主要代碼。實踐證明，基于AJAX的異步請求原理實現的文本框的自動填充功能，不但方便了醫護人員的使用，也大大提高了其工作效率，減少了病人的等待時間。

關鍵詞： AJAX； Prototype； JSON； 自動填充

中圖分類號：TP311 文獻標志碼：A 文章編號：1006-8228（2013）06-53-03

Implementation of automatic filling of texts based on Prototype

Zhang Yuye

（Dept. of computer， Jinan Vocational College， Jinan， Shandong 250014， China）

Abstract： Taking the function of automatic filling of text in module of prescription in the hospital management system as an example， it is explained in detail how to use the Prototype framework and text-based data interchange format JSON to realize automatic filling of texts. The key technology used to realize the asynchronous communication of AJAX in Prototype framework， the concrete process of realization and the main code are introduced. The practice has proved that the function of the automatic filling of texts based on AJAX asynchronous request principle is not only convenient for hospital workers， but also greatly improves the work efficiency， and thus reduces the waiting time of patients.

Key words： AJAX； Prototype； JSON； automatic filling

0 引言

隨著Web2.0技術的日漸成熟及其在網站開發中的廣泛應用，出現了越來越多更人性化的功能，這些人性化的功能使得用戶在上網瀏覽時更加方便快捷，極大增強了用戶的使用體驗。其中比較受大家歡迎的一個功能就是文本框的自動填充功能。無論是在使用百度還是谷歌等搜索引擎的時候，當在搜索文本框中輸入內容時就會自動在下面出現以輸入內容為前綴的一些搜索提示供用戶選擇，這種文本框的自動填充功能極大地方便了用戶，其應用也越來越廣泛。為提高醫院管理水平和工作效率，解決看病難的問題，眾多醫院也都紛紛開始辦公自動化。在醫院的自動化辦公管理系統中有多處用到文本框的自動填充功能，這些應用不但方便了醫護人員的使用，同時也大大提高了他們的工作效率。本文以醫生開藥方模塊中的一個文本框自動填充功能的實現為例，詳細介紹其實現過程和用到的關鍵技術。

1 應用背景和實現原理

本系統的使用對象是中醫醫院。中醫的醫生開具的一個藥方中可能有十幾種中草藥。傳統做法是將中草藥分類，提供一系列下拉列表框讓醫生從中進行選擇。這樣實現的弊端是需要將所有的數據都下載下來，既浪費服務器資源，同時響應時間也較長[1]。為了提高醫生開具藥方的效率和減少病人的等待時間，利用AJAX的異步請求原理在系統中實現了一個文本框的自動填充功能。模塊界面中提供了一個文本框，供醫生輸入藥方中的每種草藥的簡稱，在輸入的時候每輸入一個字符系統就自動從后臺數據庫中查詢以文本框中輸入內容為前綴的所有中草藥并將其顯示在文本框的下面，供醫生選擇（如圖1所示），這樣可大大提高醫生的輸入速度，從而縮短其開具藥方的時間，同時也減少了病人的等待時間，可有效緩解看病排長隊的問題。

圖1 文本框的自動填充功能

2 實現過程及用到的關鍵技術

整個系統的實現采用MVC開發模式，這種分層開發的模式有利于系統的重構和代碼的重用，且層次清晰，易于分工合作開發和維護。開發時通常先從底層開始，逐層向上。

2.1 開發工具和運行環境

系統開發工具采用MyEclipse 8.6，JDK1.6，服務器采用MyEclipse 8.6本身自帶的MyEclipse Tomcat，后臺數據庫采用Oracle 10g。客戶端可以采用IE瀏覽器或FireFox瀏覽器等。

2.2 數據庫設計

在數據庫中建立一個用來存放中草藥名的表medicine，表結構和表內容分別如表1和表2所示。

表1 medicine的結構

[列名＼&含義＼&ID＼&草藥簡稱＼&name＼&草藥全稱＼&]

表2 medicine的示例內容

[ID＼&name＼&dh＼&大黃＼&dj＼&大薊＼&dj＼&大姜＼&dz＼&大棗＼&tch＼&天蟲＼&tl＼&天龍＼&tm＼&天麻＼&]

2.3 模型層實現

模型層主要用于數據處理，實現底層數據庫的基本操作。為了便于管理和體現MVC開發模式，文件按其所在的層存放在不同的包中。在當前項目src目錄中新建一db包，用于存放所有模型層的類文件。

2.3.1 數據庫的連接

在進行數據庫操作前先要建立與數據庫的連接，在db包中新建一DBUtil.java類文件，用于建立與數據庫的連接。與數據庫連接代碼通常為通用代碼，整個項目中只須編寫一次即可。只要后臺數據庫采用Oracle 10g，與數據庫連接的代碼基本都大同小異，只須根據實際情況替換一下里面的數據庫名、用戶名和密碼即可，代碼較為簡單，這里不再給出。

2.3.2 數據庫的查詢

在db包中再新建一類文件getContentJSON.java，用于從數據庫中根據輸入的草藥簡稱查詢相應的草藥全稱，草藥信息存放在表medicine中，查詢返回的結果以JSON格式封裝。因為JSON數據封裝格式與XML數據封裝格式相比不但節省空間，而且解析速度較快[2-3]，所以在此采用JSON數據封裝格式而沒有采用XML數據封裝格式。getContentJSON.java文件主要代碼如下：

……

/*此處省略了須引入的包名*/

public class getContentJSON {

public String query（String search） {

StringBuffer suggestInfo=new StringBuffer（）；

suggestInfo.append（"{medicinesInfo：["）； //返回數據封裝成JSON格式

Connection conn=DBUtil.getCon（）；

Statement rst；

try {

rst=conn.createStatement（）；

ResultSet rs=rst.executeQuery（"select name from

medicine where ID like '"+search+"%' order by ID"）；

/*查找以輸入內容為前綴的所有草藥名，采用模糊查詢實現*/

while（rs.next（）） {

suggestInfo.append（"{medicineName：'" + rs.getString

（"name"）+"'}，"）； }

suggestInfo.deleteCharAt（suggestInfo.length（）-1）；

//刪除最后一個逗號

suggestInfo.append（"]}"）；

} catch（Exception e） {

e.printStackTrace（）；

} finally {

DBUtil.close（）； }

return suggestInfo.toString（）； }

}

2.4 業務邏輯層實現

業務邏輯層的功能比較簡單，主要用于實現請求處理。同樣為了便于管理，在當前項目的src目錄中建一個servlet包，用于存放業務邏輯層的文件。在servlet包中新建一個servlet文件contentServletJSON.java，用以處理從客戶端發送來的請求。首先接收用戶在前臺頁面文本框中輸入的內容，然后根據輸入的內容調用數據庫查詢模塊，取得相應的數據，最后將數據返回。

contentServletJSON中的doPost函數代碼如下：

public void doPost（HttpServletRequest request，

HttpServletResponse response）

throws ServletException， IOException {

response.setContentType（"text/html"）；

response.setCharacterEncoding（"gb2312"）；

String search=request.getParameter（"search"）；

String medicinesName=new getContentJSON（）.query（search）；

PrintWriter out=response.getWriter（）；

out.println（medicinesName）；

out.flush（）；

out.close（）； }

2.5 界面層的實現

界面層用于實現展示給用戶的前臺頁面。界面層文件存放在當前項目的webroot目錄中。在webroot目錄下新建一個html頁面autoComplete.html。此頁面完成的功能主要有兩個：一是呈現用戶界面，二是實現請求的異步發送和接收處理。本文省略了autoComplete.html頁面中一些常規內容，只給出關鍵部分代碼。

2.5.1 用戶界面呈現部分

請輸入草藥簡稱：