基于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 用户界面呈现部分

请输入草药简称：