返回列表 發帖
Dear 版主,

在網路上很難找到 jquery 的 JSP 範例程式.
昨日用此論壇討論說明, 改寫 Viral Patel 的 Tutorial: Create Autocomplete feature with Java – JSP / jQuery.   

1. auto_tString.jsp (亦可寫為 .html)
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
        <script type="text/javascript" src="./js/jquery.js"></script>
        <script type='text/javascript' src='./js/jquery.autocomplete.js'></script>
        <script type='text/javascript' src='./js/jquery.ajaxQueue.js'></script>

        <script type="text/javascript">
        $(function() {  
            $("#tString").autocomplete("test_auto.jsp", {minChars: 0,
                        max: 12,
                        autoFill: true,
                        mustMatch: false,
                        matchContains: false,
                        scrollHeight: 240});
          });  
         </script>
</head>
<body>
         <p>
     tString AutoComplete <input type="text" name="tString" id="tString" />
</body>
</html>

2. test_auto.jsp
    <%@page import="java.util.Iterator"%>
<%@page import="java.util.List,java.util.ArrayList"%>
<%
//        DummyDB db = new DummyDB();

        String query = request.getParameter("q");
       
        List<String> tt=new ArrayList<String>();
        tt.add("aaa");
        tt.add("abbc");
        tt.add("accd");
        tt.add("adde");

        Iterator<String> iterator = tt.iterator();
        while(iterator.hasNext()) {
                String tString = (String)iterator.next();
                out.println(tString);
        }
%>
兩個程式即使用 Ajax 完成 Autocomplete, 將 tt.add 放入資料庫 SELECT 出來的 Data.
應該可以完成 Database 的 Autocomplete 功能.

TOP

返回列表 回復 發帖