jQuery自动补全插件使用,三种获取数据源方式

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/

第一种获取数据源方式: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 ‘%"+username+"%‘");
        List<String> strs = new ArrayList<String>();
        while(rs.next()){
            strs.add(rs.getString("user_name"));
        }
        return strs;
    }
}

servlet层

package com.servlet;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.dao.Dao;
@WebServlet(name="autoServlet",value="/auto")
public class AutoServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");//解决乱码
        String username = request.getParameter("term");//默认传过来的参数名成为term,封装了文本框中输入的值
        StringBuffer sb = new StringBuffer("[");
        try {
            List<String> names = Dao.getNames(username);
            for(int i=0;i<names.size();i++){
                if(i==names.size()-1){
                    //注意在拼接的时候,要用双引号,单引号我试过,不起作用好像是,至少key必须是双引号,最好都写成双引号
                    /*
                     * 其中label属性用于显示在autocomplete弹出菜单,而value属性则是选中后给文本框赋的值。如果没有指定其中一个属性
                     * 则用另一个属性替代(即value和label值一样),如果label和value都没有指定,则无法用于autocomplete的提示。
                     */
                    sb.append("{\"lable\":\""+names.get(i)+"\",\"value\":\""+names.get(i)+"\"}]");
                }else{
                    sb.append("{\"lable\":\""+names.get(i)+"\",\"value\":\""+names.get(i)+"\"},");
                }
            }
            System.out.println(sb.toString());
            response.getWriter().write(sb.toString());
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
}

页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="${pageContext.request.contextPath }/resources/css/jquery-ui.css" rel="stylesheet">
    <style>
    body{
        font: 62.5% "Trebuchet MS", sans-serif;
        margin: 50px;
    }
    </style>
<script src="${pageContext.request.contextPath }/resources/js/jquery.js"></script>
<script src="${pageContext.request.contextPath }/resources/js/jquery-ui.js"></script>
<%-- <script src="${pageContext.request.contextPath }/resources/js/jquery.ui.core.js"></script>
<script src="${pageContext.request.contextPath }/resources/js/jquery.ui.autocomplete.js"></script>
<script src="${pageContext.request.contextPath }/resources/js/jquery.ui.position.js"></script>
<script src="${pageContext.request.contextPath }/resources/js/jquery.ui.widget.js"></script> --%>
</head>
<body>
    <input id="username" type="text" value="" name="username"/>
</body>
<script type="text/javascript">
//String方式
$(function(){
    $("#username").autocomplete({
        source:"<c:url value="/auto"/>",
        minLength:1
    });
});

</script>
</html>

第二种获取数据源方式:回调函数

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;

import domain.User;

public class Dao2 {
    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<User> getNames(String username) throws Exception{
        Connection c = getConnection();
        Statement stat = c.createStatement();
        ResultSet rs = stat.executeQuery("select * from t_user where user_name like ‘%"+username+"%‘");
        List<User> users = new ArrayList<User>();
        while(rs.next()){
            User u = new User();
            u.setUserId(Integer.parseInt(rs.getString("user_id")));
            u.setUserName(rs.getString("user_name"));
            u.setBirth(rs.getString("user_date"));
            users.add(u);
        }
        return users;
    }
}

User

package domain;

public class User {

    private Integer userId;
    private String userName;
    private String birth;

    //getter setter tostring

}

servlet层

package com.servlet;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.dao.Dao2;
import com.google.gson.Gson;

import domain.User;

/**
 * Servlet implementation class AutoServlet2
 */
@WebServlet("/auto2")
public class AutoServlet2 extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        System.out.println(request.getParameter("userName"));
        try {
            List<User> users = Dao2.getNames(request.getParameter("userName"));
            Gson gson = new Gson();
            String str = gson.toJson(users);
            response.getWriter().write(str);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
}

页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="${pageContext.request.contextPath }/resources/css/jquery-ui.css" rel="stylesheet">
    <style>
    body{
        font: 62.5% "Trebuchet MS", sans-serif;
        margin: 50px;
    }
    </style>
<script src="${pageContext.request.contextPath }/resources/js/jquery.js"></script>
<script src="${pageContext.request.contextPath }/resources/js/jquery-ui.js"></script>
</head>
<body>
<input type="text" name="userName" id="userName"/>
</body>
<script type="text/javascript">
$("#userName").autocomplete({
source: function( request, response ) {
    $.ajax({
        type:"post",
        url: "<c:url value="/auto2"/>",
        dataType: "json",
        data:{
            userName: request.term
        },
        success: function( data ) {
            response( $.map( data, function( item ) {
                return {   //lable为下拉列表显示数据源。value为选中放入到文本框的值,这种方式可以自定义显示
                    lable:item.userName,
                    value: item.userName
                }
            }));
        }
    });
},
minLength: 1,
select: function( event, ui ) { //移动键盘上下键,自动将下拉列表的数据放入到文本框,不过不写这个配置也是可以的,默认就行,具体这个还不知道是做什么
    $("#userName").val(ui.item.userName);
}
});
</script>
</html>

第三种方式较简单,直接在页面上放入,比如:

// 本地json数组
var availableTagsJSON = [
{ label: "C# Language", value: "C#" },
{ label: "C++ Language", value: "C++" },
{ label: "Java Language", value: "Java" },
{ label: "JavaScript Language", value: "JavaScript" },
{ label: "ASP.NET", value: "ASP.NET" },
{ label: "JSP", value: "JSP" },
{ label: "PHP", value: "PHP" },
{ label: "Python", value: "Python" },
{ label: "Ruby", value: "Ruby" }
];
$("#local").autocomplete({
source: availableTagsJSON
});

csdn主页:
http://my.csdn.net/

时间: 05-05

jQuery自动补全插件使用,三种获取数据源方式的相关文章

非常好用的JQuery自动补全插件bigautocomplete

自动补全插件,有些功能有限,有些是老外做的,不支持中文.今天发现一个国人做的,叫做bigautocomplete,还不错. 官网下载地址:http://code.google.com/p/jquery-bigui/downloads/list 如果不想翻墙的话,可以从这里下载(已经转码为UTF-8):http://download.csdn.net/detail/clementad/8917219 使用步骤: 1.把两个js和css文件放到项目中: 2.在项目页面中引用: <script src

Emacs 自动补全插件 ycmd

Emacs 自动补全,最好的插件当属 ycmd.以下记录我的安装过程. 1. 安装 ycmd server github 官方地址: https://github.com/Valloric/ycmd - git 克隆 ycmd 到本地 ~/ycmd $ git clone https://github.com/Valloric/ycmd.git ~/ycmd - 安装必要的编译工具和库 $ sudo apt-get install build-essential cmake python-dev

Bolt XML和JQBolt Lua代码自动补全插件配置教程

Bolt没有提供官方IDE,缺少强大的代码提示和自动补全,Notepad++写起界面和脚本来比较费劲. Notepad++有个QuickText插件,支持多语言的自动补全,进行简单的配置就可以支持Bolt XML和JQBolt Lua代码. 配置后的效果,输入关键字,Ctrl+Enter自动补全: 下面介绍一下配置方法: 1.在JQBolt中下载QuickText插件和已经配置好的配置文件:https://github.com/zhenghecn/JQBolt,这两个文件在plugins目录下:

jquery ui 学习随笔 自动补全

一.调用autocomplete()方法 $('#email').autocomplete({ source : ['[email protected]', '[email protected]', '[email protected]'], }); 二.修改autocomplete()样式 由于autocomplete()方法是弹窗,然后鼠标悬停的样式.我们通过Firebug 想获取到悬停 时背景的样式,可以直接通过jquery.ui.css 里面找相应的CSS. //无须修改ui 里的CSS

bigautocomplete实现联想输入,自动补全

bigautocomplete是一款Jquery插件.用它实现仿搜索引擎文本框自动补全插件功能很实用,使用也很简单,引入了插件之后写几行代码就可以实现,可以灵活设置. 先看效果图: 上图是通过ajax请求服务器返回的数据.下面简单介绍如何使用. 一.如何使用: 引入jquery.bigautocomplete.js和jquery.bigautocomplete.css文件到你的页面中. 二.参数说明: $("xxxxx").bigAutocomplete({data:[...],url

Vim自动补全神器–YouCompleteMe

YouCompleteMe的特别之处 基于语义补全 总所周知,Vim是一款文本编辑器.也就是说,其最基础的工作就是编辑文本,而不管该文本的内容是什么.在Vim被程序员所使用后,其慢慢的被肩负了与IDE一样的工作,文本自动补全(ie.acp,omnicppcompleter),代码检查(Syntastic)等等工作. 针对文本自动补全这个功能来说,主要有两种实现方式. 基于文本 我们常用的omnicppcompleter,acp,vim自带的c-x, c-n的实现方式就是基于文本.更通俗的说法,其

【Bootstrap】 typeahead自动补全

typeahead 这篇文章记录了我在使用typeahead的一些问题,不是很全,但是基本够用. Bootstrap提供typeahead组件来完成自动补全功能. 两种用法: 直接给标签添加属性 <input type="text" data-provide="typeahead"> 通过设置autocomplete="off"来关闭浏览器自带的自动补全功能,以防跟我们的产生冲突. 通过JavaScript 调用$('.typeahe

知问前端——自动补全UI

自动补全(autocomplete),是一个可以减少用户输入完整信息的UI工具.一般在输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. 调用autocomplete()方法 var host = ['aa', 'aaaa', 'aaaaaa', 'bb']; $("#email").autocomplete({ source:host }); 修改autocomplete()样式 由于autocomplete()方法是弹窗,然后鼠标悬停的样式,我们通过Firebug想获取到

Linux下Python设置vim和交互模式下自动补全

运行环境: aliyun ECS Centos6.5_x64 一.vim python自动补全插件 pydiction 1.安装配置 wget https://github.com/rkulla/pydiction/archive/master.zip unzip -q master mv pydiction-master pydiction mkdir -p ~/.vim/tools/pydiction cp -r pydiction/after ~/.vim cp pydiction/com