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

时间：2023-03-08 20:39:41
jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式

直接看代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Autocomplete - Default functionality</title>
    <link rel="stylesheet" href="bootstrap.css"/>
    <link ref="stylesheet" type="text/css" href="jquery-ui-1.10.0.custom.css"/>    <script src="jquery-1.11.2.js"></script>
    <script src="bootstrap.js"></script>
    <script src="jquery-ui.js"></script>
    <script src="jquery.ui.datepicker-zh-CN.js"></script>
    <style type="text/css">     .ui-autocomplete{　　　　max-width:175px;  /*下拉列表宽度*/       max-height:150px;       overflow-y:auto;       overflow-x:hidden;       padding-right:1px;       color:black;       font-size:14px;     }     .ui-state-focus{    /*设置被选中的下拉列表数据样式*/　　   background-color:#009acd;      font-weight:bold;     }　　</style>
<body>
<script type="text/javascript">
    $(function() {
        //可以实现点击文本框就进行查询，但是需要和后台进行配合，
        //首先需要是一个模糊查询，当输入空格时查询出所有数据
        $('#id').autocomplete({
            source:function(request,response){
                $.ajax({
                    type:"post",
                    url:"<c:url value='/getDeviceName'/>",
                    dataType:"json",
                    data{
                      deviceName:request.term
                    },
                    success:function(data){
                        response($.map(data,function(item){
                            return {
                                lable:item.deviceName,
                                value:item.deviceName
                            }
                        }));
                    }
                });
            },
            minLength: ,
            delay:,
            autoFocus:true   //是否自动默认选中下拉列表第一项，默认为false，即不选中
             select:function(event,ui){  //键盘上下键移动，将选中的值放入到搜索框中
                $("#id").val(ui.item.deviceName);
            }
          }).focus(function(){     

            //根据版本不同使用下面的两个方法，其实是玩了个障眼法，在这里当文本框获取焦点时，输入个空格进行模糊查询
            //后台做了判断，如果输入的值前后都去了空格，如果输入空格，后台接收数据就为null，则此时就默认按照所有进行查找，即like %%
            //本身这个也是sql自身的特性，但是一下两句话在不同版本中使用，上面不行，用下面，下面不行用上面
            //$(this).data("autocomplete").search(" "));
            $(this).data("uiAutocomplete").search(" ");
    });
</script>
<input type="text" id="id" name="deviceName">
</body>
</html>

下面为实例

package com.util;

import java.sql.Connection;
import java.sql.DriverManager;

public class ConnectionUtil {

    private static ThreadLocal<Connection> cs = new ThreadLocal<Connection>();

    public static Connection getConnection() throws Exception{
        Connection c = cs.get();
        if(null==c){
            Class.forName("com.mysql.jdbc.Driver");
            c = DriverManager.getConnection("jdbc:mysql://localhost:3306/itac", "root", "root");
        }
        return c;
    }
}
package com.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.po.Device;
import com.util.ConnectionUtil;

public class DeviceDao {

    public List<Device> getDevices(String deviceName){
        Connection c=null;
        PreparedStatement ps =null;
        List<Device> ds = new ArrayList<Device>();
        try {
            c = ConnectionUtil.getConnection();
            ps= c.prepareStatement("select * from device where deviceName like ?");
            ps.setString(, "%"+deviceName+"%");
            ResultSet rs = ps.executeQuery();
            while(rs.next()){
                Device d = new Device();
                d.setId(rs.getInt("id"));
                d.setDeviceName(rs.getString("deviceName"));
                d.setIp(rs.getString("ip"));
                ds.add(d);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }finally{
            if(null!=ps){
                try {
                    ps.close();
                } catch (SQLException e) {

                    e.printStackTrace();
                }
            }
            if(null!=c){
                try {
                    c.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
        return ds;
    }
}
package com.servlet;

import java.io.IOException;
import java.sql.Connection;
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.DeviceDao;
import com.google.gson.Gson;
import com.po.Device;
import com.util.ConnectionUtil;

public class DeviceServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private DeviceDao deviceDao = new DeviceDao();

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //参数要去空格，即用trim处理
        String deviceName = request.getParameter("deviceName").trim();
        System.out.println(deviceName);
        List<Device> ds = deviceDao.getDevices(deviceName);
        Gson gson = new Gson();
        String dstr = gson.toJson(ds);
        response.getWriter().write(dstr);
    }

}

页面

<%@ 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 }/css/bootstrap.css"
    type="text/css" rel="stylesheet" />
<link href="${pageContext.request.contextPath }/css/jquery-ui-1.10.0.custom.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/bootstrap.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ui.datepicker-zh-CN.js"></script>
<style type="text/css">
.ui-autocomplete{
　　　　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:red; /*设置下拉列表中被选中的字体的颜色*/
　　　　font-weight:bold;  /*设置下拉列表中被选中的字体加粗显示*/
}

</style>
</head>
<body>
<table class="table">
    <tr>
        <td>设备名称</td>
        <td><input type="text" id="deviceName" name="deviceName"/></td>
    </tr>
</table>
</body>
<script type="text/javascript">
$(function(){
    $("#deviceName").autocomplete({
        source:function(request,response){
            $.ajax({
                type:"post",
                url:"<c:url value="/dServlet"/>",
                dataType:"json",
                data:{
                    deviceName:request.term
                },
                success:function(data){
                     response($.map(data,function(item){
                         return {
                             lable:item.deviceName,
                             value:item.deviceName
                         }
                     }));
                }
            });
        },
        minLength:,
        delay:,autoFocus:true,
        select:function(event,ui){
            $("#deviceName").val(ui.item.deviceName);
        }
    }).focus(function(){
        $(this).data("uiAutocomplete").search(" ");
    });
});
</script>
</html>

本页面的样式还需要调整

这里有篇可以稍微做个参考的文章

http://*.com/questions/4132058/display-jquery-ui-auto-complete-list-on-focus-event