jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一。jQuery ui autocomplete主要支持字符串Array、JSON两种数据格式。
主要参数:
Source:数据源,类型为String、Array、Function,其中String为ajax请求的服务器端地址,返回Array/JSON格式,Array即为数组,静态定义到页面中的数据,下面会有具体的
demo,Function(request,response):通过request.term获得输入的值,response(Array)来呈现数据(JSONP是这种方式);
minLength:当输入框内字符串长度达到minLength时,激活Autocomplete
autoFocus:当autocomplete选择菜单弹出时,自动选中第一个。
delay:即延迟多少毫秒autocomplete
disabled:是否禁用自动完成功能,默认false
jQuery ui提供的常用方法:
close():关闭智能提示框
destory():销毁智能提示框,将其所产生的元素完全删除,使其恢复至初始状态
disable():禁用自动完成功能
enable():开启自动完成功能
主要事件:
change(event,ul):当值改变时发生,ui.item为选中项
close(event,ui):当智能提示框关闭时发生
create(event,ui):当智能提示框创建时发生,可以在此事件中,对外观进行控制
focus(event,ui):当智能提示列表任意一项获得焦点时发生,ui.item为获得焦点的项
open(event,ui):当智能提示框打开或更新时发生
response(event,ui):在搜索完成之后智能提示框显示前发生,可以在此时间中对显示项进行处理
search(event,ui):在开始请求之前发生,可以在此事件中返回false来取消请求
select(event,ui):当智能提示框中任意一项被选中时发生,ui.item为选中项
使用时应首先需要导入相关的js文件
下载:http://jqueryui.com/autocomplete/ jquery ui相关js ,下载后的文件external文件夹下有jquery的核心js
第一种获取数据源方式:String,即通过字符串发送ajax,本例为了省事,直接就使用了原始的servlet,没有用到框架,只是演示效果
数据库(略)
dao
package com.dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
public class Dao {
private static Connection getConnection() throws Exception{
Class.forName("com.mysql.jdbc.Driver");
return DriverManager.getConnection("jdbc:mysql://localhost:3306/itac", "root", "root");
}
public static List<String> getNames(String username) throws Exception{
Connection c = getConnection();
Statement stat = c.createStatement();
ResultSet rs = stat.executeQuery("select user_name from t_user where user_name like '%"+usern