JqueryUI Autocomplete 自动补全实例

最新推荐文章于 2020-12-01 11:06:41 发布

qiu512300471

最新推荐文章于 2020-12-01 11:06:41 发布

阅读量1k

点赞数

1：现在Autocomplete已经成为jQuery UI的Widgets的一员。看了它实现自动补全的功能，感觉还OK，使用起来蛮方便的。因此我自己写了个程序利用Jquery UI Autocomplete实现自动补全功能。

简单介绍一下：例子利用JSP+servlet+oracle实现的，后台根据前台输入的相关关键字到后台取数据返回JSON对象给前台。

首先：导入相关的JS与CSS，其中包括：

jquery-ui-1.8.10.custom.css；

jquery-1.4.4.min.js;

jquery-ui-1.8.10.custom.min.js

前台页面代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'autocomplete.jsp' starting page</title>

    //$("#autocomplete").autocomplete({
     //source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"]
    //});

    $("#autocomplete").autocomplete({
     minLength:1, //表示输入多少个字才出现自动补全框
     source:function(request,response){
      $.ajax(
       {
        url: http://localhost:<%=request.getLocalPort() %>/JuqeryUI/Autocomplete",
        dataType: "json",
        data: request,
        success:function(data){
         response(data);
        }
       }
      );
     }

    });
  });
</script>
</head>

后台处理代码：

待会用到JSON转换时，需要一个JSON包，到网上下载：json-lib-2.4-jdk15.jar

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

  response.setContentType("text/html");
  request.setCharacterEncoding("UTF-8");
  response.setCharacterEncoding("utf-8");
  //得到页面输入的参数
  String param = request.getParameter("term");
  //转码，不然中文会出现乱码
  String term = new String(param.getBytes("iso8859-1"),"utf-8");
  System.out.println(term+"00000000");
  //根据输入的关键字查找
  List<String> listContent = DBConnec.getAutocomContent(term);

  System.out.println(param+"--------------'");
  //转换为JSON格式
  JSONArray jsonObject = JSONArray.fromObject(listContent);
  PrintWriter out = response.getWriter();
  out.write(jsonObject.toString());

out.flush();
out.close();
}

//getAutocomContent（）方法是查询数据库返回List对象。代码就不贴出来了，很简单。

好啦，程序搞定。测试，成功！实现的效果如下

：

程序只是实现了简单的功能，异常处理，代码规范等等没有写的那么到位，希望大家理解 ^_^。大家有什么看法意见，欢迎评判。

qiu512300471

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JqueryUI Autocomplete 自动补全实例

1：现在Autocomplete已经成为jQuery UI的Widgets的一员。看了它实现自动补全的功能，感觉还OK，使用起来蛮方便的。因此我自己写了个程序利用Jquery UI Autocomplete实现自动补全功能。简单介绍一下：例子利用JSP+servlet+oracle实现的，后台根据前台输入的相关关键字到后台取数据返回JSON对象给前台。首先：导入相关的JS与CSS，其中包括
复制链接

扫一扫