在这个例子中，我所使用的是jsuggest插件
前期准备工作：下载好jsuggest这个自动补全插件，然后将和文件、图片复制到相应的文件夹下，然后在相应的jsp页面导入这些文件
第一步：首先在jsp页面上，我们要将输入框通过jquery代码绑定到我们的自动补全插件上（即jsuggest插件上）
<!-- 导入自动补全插件的css、js文件，jquery文件，注意，jquery文件要现在文件前先导入 -->
<link rel="stylesheet" type="text/css" href="/lbsp/LW/css/">
<script type="text/javascript" src="../../js/jquery-1.7."></script>
<script type="text/javascript" src="/lbsp/LW/js/"></script>
<script type="text/javascript">
$(function(){
$("#condition_value1").jSuggest({
url: "", //要发送到的处理页面
type: "GET",
data: "project_key" , //参数
autoChange: true
});
});
//这边我们也可以在文件下的$. 这个里面进行设置
//这里面可以设置我们自动补全的设置
$. = {
//输入多少字符时会自动补全
minchar: 1,
//透明度
opacity: 1.0,
zindex: 20000,
delay: 2500,
//加载时的图片信息
loadingImg: 'Images/',
//加载时的文本提示
loadingText: 'Loading...',
autoChange: false,
url: "",
type: "GET",
data: ""
};
到此，我们在jsp前端的部分就完成了
第二步：编写我们dao（数据库查询）类的编写
Public ArrayList<String> queryByAutoFind(String key){
//具体业务根据自己的需求写
//key为我们的绑定到插件data上时的project_key
//sql语句可以写成
key = “%” + key + “%”;
（ Select top 10 title from news where title like ？ order by newsid desc , key） 或者下面这样写也可：Select top 10 title from news where title like ‘%”+key+”%’ order by newsid desc
}
第三步：编写我们的处理页面页面，（注意:当然也可以是servlet页面）
首先我们要先判断是否在这个页面接收到传过来的data参数
String project_key = ("project_key");
注意：如果这边我们没有写编码的过滤器的话，我们这边接收中文的时候可能会出现乱码：这时我们要这样处理：
String key =new String( (“key”).getBytes(“8859_1”),”utf-8”);
查询出数据后，我们就要对这些集合进行遍历，按照页面的格式进行拼接输出到展示页面的格式
（注意：这边由于我已经封装好dao类，所以省去这一步，将第二、第三步直接写在这一个页面）
代码如下：
<%
List list = null;
String sql = null;
StringBuffer sb = new StringBuffer("<ul>"); //拼接ul输出到展示页面的格式
JdbcTemplate jdbcTemplate =new JdbcTemplate("proxool");
//String key = ("name_key");
// ("品牌的名字是:"+key);
if(("project_key") != null)
{
String project_key = ("project_key");
//处理输入框的首尾空格
int i = project_key.length();// 字符串最后一个字符的位置
int j = 0;// 字符串第一个字符
int k = 0;// 中间变量
char[] arrayOfChar = project_key.toCharArray();// 将字符串转换成字符数组
while ((j < i) && (arrayOfChar[(k + j)] <= ' ')) ++j;// 确定字符串前面的空格数
while ((j < i) && (arrayOfChar[(k + i - 1)] <= ' ')) --i;// 确定字符串后面的空格数
if ((j > 0) || (i < project_key.length())) {
project_key=project_key.substring(j, i); // 返回去除空格后的字符串
}
try
{
();
//加上count（*），group by product_project可以去除查询页面时相同的选项
sql = "select product_project,count(*) as count from SQ_PRORES_PRODUCT t where product_project like '%"+project_key+"%'";
String[] str = project_key.split("，|,|;|；|。|\\.| | | |\\@|\\$|\\*|\\￥|\\-|\\+|\\\\|<|>");
for(int a =0 ;a < ;a++)
{
project_key = str[a];
sql += " or product_project like '%"+project_key+"%'";
}
String sqls= null;
sqls = sql +"group by product_project";
list = (sqls);
for(int a=0;a<();a++) //添加<ul><li>*****</li></ul>的输出格式
{
Map map = ( Map)(a);
("<li>"+("product_project")+"</li>");
}
("</ul>");
}
catch (SQLException e) {
();
();
} finally {
();
}
}
%>
<%= ()%> //注意：此句的作用就相当于我们在servlet中("***")这句的作用，就是将结果输出到jsp页面，不能漏掉
到此就可以实现自动补全功能!