jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一。jQuery ui autocomplete主要支持字符串Array、JSON两种数据格式,jQuery ui bootstrap autocomplete和次用法几乎相同

主要参数:

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
});

导入相应的js文件,若下拉列表显示样式失效,则可以自己手动设置样式,可在当前页面中添加如下样式:

<style type="text/css">
  .ui-auto-complete{
    max-width:160px; /*设置下拉列表框的宽度*/
    max-height:150px;/*设置下拉列表框的高度,如果放不下,则会出现滚动条*/
    overflow-y:auto;/**/
    overflow-x:hidden;
    padding-right:1px;
    color:black;   /*设置下拉框的字体颜色*/
    font-size:14px; /*设置下拉框的字体大小*/
}
  .ui-state-focus{
    background-color:#00pacd; /*设置下拉列表中被选中的字体的颜色*/
    font-weight:bold;  /*设置下拉列表中被选中的字体加粗显示*/
}
</style>

可以利用firebug或者其他工具查看运行时页面引用的样式,然后对其进行修改,通过查看可以发现,页面中引用了.ui-auto-complete和.ui-state-focus类样式,当然,还引用了其他的类样式

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

jQuery ui autocomplete下拉列表样式失效解决,三种获取数据源方式,的更多相关文章

  1. jQuery ui autocomplete 与easyUI冲突解决办法(重命名ui的autocomplete 和menu部分)

    http://jqueryui.com/download/   UI定制只选autocomplete 会自动把依赖的menu模块也加入进来--然而easyUI也有自己的menu,于是就-- 折腾了好久 ...

  2. jquery ui autocomplete 实现点击文本框,出现所有查询信息效果,与bootstrap结合使用修改样式

    直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...

  3. jQuery UI Autocomplete Combobox 配 ASP.NET DropDownList

    0.引言   1.起因                  一开始使用Autocomplete做了一个自动补全的文本框,如上图.后来因业务需要希望能在这个文本框的边上做个下拉列表按钮,一按就展开所有支持 ...

  4. jQuery UI AutoComplete的使用

    现场提出优化单,Table Mapping里关于获取数据源下所有表名的地方由于表数量过多选择不便,需添加搜索功能.原本的实现是一个Dialog ,现打算将其改为AutoComplete. 框架使用的是 ...

  5. Jquery ui autocomplete简单api

    重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocompl ...

  6. jQuery UI Autocomplete是jQuery UI的自动完成组件(share)

    官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...

  7. jQuery.ui autoComplete使用

    官网  http://api.jqueryui.com/autocomplete/#option-source 参考了 http://www.cnblogs.com/lwme/archive/2012 ...

  8. Node.js配合jQuery UI autocomplete的应用

    Node.js擅长的领域为: 不需要很多运算 吞吐量要求高 进消息轻并且要求快 出消息轻并且要求快 网上的例子都是socket.io的,我一直在想到底能用在什么地方?根据node.js的优点(擅长领域 ...

  9. JQuery UI Autocomplete与jquery.autocomplete.js

    程序中要把一个select改成可以下拉搜索的,就想到了使用下autocomplete.js大概是这么个东西. 问了下同学,推荐我使用Jquery Ui autocomplete,下载下来开始调试使用, ...

随机推荐

  1. 关于使用 no-js (Modernizr)

    最近有些朋友问到:为什么我的网页 code 有 class="no-js" ? <!DOCTYPE html> <html dir="ltr" ...

  2. source insight 编程风格(持续更新)

    1.字体Source Code Pro 出身于豪门Adobe,从名字上来看就知道是转为编码而生的.基本上也是拥有前面所提的编程字体的所有要素的.这个字体基本上具有编程字体所需的所有要素:等宽.支持Cl ...

  3. android APK更新

    菜鸟的博客请多多指教 最近做了一个新功能,更新APK的功能 1.更新APK是一个耗时的任务,我采用了一个服务来做,上次在网上看到服务是在主线程里面,自己也测试了下,数据是真的 所以下载动作还必须在服务 ...

  4. [转]asp.net c# 网上搜集面试题目(附答案)

    本文转自:http://www.cnblogs.com/hndy/articles/2234188.html 1.String str=new String("a")和String ...

  5. cache缓存

    缓存分为:数据缓存,页面缓存,内存缓存(memcache,redis) ob,输出缓冲区,是output buffering的简称 FileCache.php <?php //本文件用来存储和读 ...

  6. [SAP ABAP开发技术总结]选择屏幕——SELECT-OPTIONS

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  7. iOS 捕获系统外异常

    iOS 捕获系统外异常 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太 ...

  8. Windows Azure Service Bus 推动财务服务门户的高可用性和可伸缩性

    抵押贷款公司和评估管理公司面临着快速.复杂且数据量极大的业务流程.他们需要可快速.轻松设置且容量几乎无限的可伸缩的企业级服务,来对处理评估订单以及自动化流程本身所产生的所有文档和数据进行管理. 这听起 ...

  9. kvstore之memcached为存储介质

    ecstore中kvstore选用memcached作为存储介质 kvstore存储类选用base_kvstore_memcached(app/base/lib/kvstore/memcached.p ...

  10. java数据结构之二叉树的实现

    java二叉树的简单实现,可以简单实现深度为n的二叉树的建立,二叉树的前序遍历,中序遍历,后序遍历输出. /** *数据结构之树的实现 *2016/4/29 * **/ package cn.Link ...