当前位置: 代码迷 >> Web前端 >> jquery autocomplete施用
  详细解决方案

jquery autocomplete施用

热度:74   发布时间:2012-08-29 08:40:14.0
jquery autocomplete使用

jquery autocomplete可以实现自动完成,当用户输入一个关键字后,返回和这个关键字相关的词汇。

???下面介绍两种向jquery autocomplete返回数据库数据的方法,第一种方法直接返回text,是我自己摸索出来的;第二种方法返回JSON数据,可以返回结构比较复杂的数据,参考了官方文档和网友的作法。我使用struts2和jquery1.3.2做了个sample,希望能帮到大家。

?

1、直接返回text数据

A、Action类

public class AutocompleteAction {

private String q;// autocomplete请求参数

pulbic void searchKey(){

?????? if(q==null||q.trim().equals("")){

????????????? return;

?????? }

?????? Connection conn=null;

?????? PreparedStatement ps=null;

?????? ResultSet rs=null;

??????

?????? HttpServletResponse response = ServletActionContext.getResponse();?

?????? response.setContentType( "text/html;charset=utf-8 ");

?????? response.setHeader( "Cache-Control ",?? "no-cache ");

?????? response.setHeader( "Pargma ", "no-cache ");

?????? PrintWriter writer =null;

?????? try{

????????????? conn=getConnection();//得到连接,略

????????????? //netkeys表只有id和key两个字段

????????????? ps=conn.prepareStatement("select * from netkeys where keywork like ?");

????????????? ps.setString(1, q+"%");

????????????? rs= ps.executeQuery();

????????????? writer=response.getWriter();

????????????? while(rs.next()){

???????????????????? String v=rs.getString(2);

???????????????????? writer.println(v);

????????????? }

?????? }catch(Exception e){

????????????? e.printStackTrace();

?????? }finally{

????????????? //关闭连接等资源,略

????????????? if(writer!=null)writer.close();

?????? }

}

?

B、JSP文件

引用jquery和autocomplete库,略

<SCRIPT type=text/javascript>

$(function() {

?????? var url="autocompleteAction! searchKey.action";

?????? $("#keyword").autocomplete(url, {

????????????max: 20,?????

??????????? autoFill: true,?????

??????????? mustMatch: false,?? // 作用效果就是自动清空不匹配的输入

??????????? matchContains: false,????

??????????? scrollHeight: 220,??

??????????? formatItem: function(row, i, max) {??

????????????? return "<I>"+row[0]+"</I>";?????

??????????? },??????

??????????? formatMatch: function(row, i, max) {??

????????????? return row[0];?????

??????????? },?????

??????????? formatResult: function(row) {????

????????????? return row[0];?????

??????????? }?????

?????? });

});

?

?

2、返回json方式

A、修改前面Action类

List keys=new ArrayList();

while(rs.next()){

?????? String v=rs.getString(2);

?????? keys.add(v);

}

//返回json数据

resultJSON = new JSONObject();//JSONObject类来自json-lib-2.3库

writer.print(resultJSON.element("v", keys).toString());//会返回{“v”:[]}格式的数据

?

B、修改JSP中autocomplete插件方法

dataType:'json',//返回数据类型

parse:function(data){

???? var rows=[];

???? for(var i=0;i<data.v.length;i++){

????????? //一定要按以下格式设置数据

????????? rows[rows.length]={

????????? ??? data:data.v[i],

????????? ??? value:data.v[i],//值

????????? ??? result:data.v[i]//返回结果显示内容

??????? ?};

????? }

????? return rows;

?},

?formatItem:function(row, i, n) {??

????? return "<I>"+row+"</I>";?????

?}?

  相关解决方案