当前位置:编程学习 > JAVA >>

采用jqueryui实现auotcomplete自动填充功能(连接数据库@Hibernate+struts2)

页面如下:
源码:
[html] 
<%@ 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 'suggest.jsp' starting page</title>  
  
        <meta http-equiv="pragma" content="no-cache">  
        <meta http-equiv="cache-control" content="no-cache">  
        <meta http-equiv="expires" content="0">  
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
        <meta http-equiv="description" content="This is my page">  
  
        <link rel="stylesheet" type="text/css"  
            href="./style/jquery-ui-1.10.2.custom.css">  
        <script type="text/javascript" src="./scripts/jquery-1.9.1.js"></script>  
        <script type="text/javascript"  
            src="./scripts/jquery-ui-1.10.2.custom.js"></script>  
        <script type="text/javascript">  
    $(document).ready(function() {  
        //获取id="keyword"的input对象  
            /*$("#keyword").autocomplete( {  
            //source的两种固定写法(数组方式和数组对象),第二种在页面显示的是value值  
            source:['java','javascript','javaweb']*/  
            /*source : [ {  
                label : 'java开发',  
                value : 'java'  
            }, {  
                label : 'javascript开发',  
                value : 'js'  
            }, {  
                label : 'javaweb开发',  
                value : 'web'  
            } ]  
              
            });*/  
  
            //以下是从数据库获取分  
            $("#keyword").autocomplete(  
                    {  
                        minLength : 1,//限定输入文本的最短长度  
                        source : function(request, response) {  
                            //alert(request.term + "-----"+ $("#keyword").val());  
                        //发送ajax请求  
                        $.post("./csdn/UserAction_keyVals.action?time="  
                                + new Date().getTime(), {  
                            keyword : request.term  
                        }, function(data) {  
                            /*response($.map(data.users,function(u){  
                            return u.name;  
                            }));*/  
                            //返回含有label和value属性的操作  
                            response($.map(data.users,function(u){  
                            return {label:u.name,value:'java'};  
                            }));  
                        }, "json");  
  
                    }  
  
                    });  
  
        });  
</script>  
        <style type="text/css">  
.s_ipt {  
    width: 405px;  
    height: 30px;  
    font: 16px/ 22px arial;  
    margin: 5px 0 0 7px;  
    background: #fff;  
    outline: 0;  
    -webkit-appearance: none;  
}  
</style>  
    </head>  
  
    <body>  
        <h3 align="center">  
            采用jqueryui实现auotcomplete自动填充功能  
        </h3>  
        <hr />  
  
        <div align="center">  
            <div>  <
补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,