如何使用jQuery的自動完成功能？

Question

我正在使用JSP創建一個Web項目，並且正在嘗試使用jquery自動完成功能從我的數據庫中為用戶實現簡單的搜索，但是我無法理解它的工作原理。 我對jquery和ajax幾乎一無所知，只是想讓您知道。 我完成了以下代碼，並被卡住。

<%@page contentType="text/html" pageEncoding="UTF-8" import="ewa.dbConnect,ewa.sendEmail,ewa.pwGen,ewa.hashPw,java.sql.*" %>
<!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 src="js/jquery.autocomplete.js"></script>
        <script type="text/javascript"
            src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <input type="text" id="search" name="search"/>
        <script>
        $("#search").autocomplete("getdata.jsp");
    </script>
    </body>
</html>

getdata.jsp

<%@page contentType="text/html" pageEncoding="UTF-8" import="ewa.dbConnect,java.sql.*" %>
<%! dbConnect db = new dbConnect(); %>
<%
String query = request.getParameter("q");
db.connect();
Statement stmt = db.getConnection().createStatement();
ResultSet rs = stmt.executeQuery("SELECT username FROM created_accounts WHERE username LIKE "+query);
while(rs.next())
{
    out.println(rs.getString("username"));
}
db.disconnect
%>

如果我沒看錯，我是從網站上讀取的，參數q是默認值，就在其中，但是如何顯示數據？ 我如何將值從getdata.jsp傳遞到自動完成功能？

Answer 1

您在包含jQuery之前調用了自動完成腳本標記。 因此，沒有jQuery可以鎖定（因為尚未定義jQuery對象），因此jQuery自動完成插件不會加載任何內容。

你有

 <script src="js/jquery.autocomplete.js"></script>
 <script type="text/javascript"
     src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

它應該是

    <script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="js/jquery.autocomplete.js"></script>

顛倒順序，您提到的Firebug錯誤應該消失； 我不確定它是否能解決所有問題，但是在解決之前沒有任何作用。

Answer 2

我沒有看到包含jQuery UI（該UI提供了自動完成功能）

http://jqueryui.com/demos/autocomplete/

因此，您需要包括jquery.ui.autocomplete.js（或者您是否正在使用插件自動完成功能？如果是，請移至jquery UI版本）

也可能是來自getdata.jsp的數據格式錯誤，無法用於自動完成。

您如何嘗試在瀏覽器（例如chrome）或firefox（帶有firebug）中調試javascript

Answer 3

我通常給（用於jQuery UI自動完成功能）一個JSON格式的答案，而我看到您的答案循環給出了一個CR分隔列表。

在getdata.jsp中而不是產生：

jim<cr>
jack>cr>
jhon<cr>

嘗試返回：

[{label: 'jim', value: 'jim'}, {label:
 'jack', value: 'jack'}, {label:
 'jhon', value: 'jhon'}]

如何使用jQuery的自動完成功能？

問題描述

3 個解決方案

解決方案1
7 已采納 2011-01-09 16:15:45

解決方案2
0 2011-01-09 14:50:30

解決方案3
0 2011-01-09 17:10:40

如何使用jQuery的自動完成功能？

問題描述

3 個解決方案

解決方案1 7 已采納 2011-01-09 16:15:45

解決方案2 0 2011-01-09 14:50:30

解決方案3 0 2011-01-09 17:10:40

解決方案1
7 已采納 2011-01-09 16:15:45

解決方案2
0 2011-01-09 14:50:30

解決方案3
0 2011-01-09 17:10:40