how to use jquery autocomplete?

问题

i am creating a web project using JSP, and is trying to implement a simple search for users from my database using jquery autocomplete, however i am having trouble understanding how it works. i have little to no knowledge on jquery and ajax just to let you know. i have done the following code and am stuck.

<%@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
%>

if i am not wrong i read from a website, the parameter q is default and is just there, however how do i display the data? how do i pass the values from getdata.jsp into the autocomplete?

回答1:

You're calling the autocomplete script tag before jQuery has been included. So, not having jQuery to latch onto (as the jQuery object hasn't been defined), nothing from the jQuery autocomplete plugin will load.

You have

 <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>

It should be

    <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>

Reverse the order, and the Firebug errors you mentioned should disappear; I'm not sure it'll solve everything, but nothing will work until that's resolved.

回答2:

I don't see jQuery UI being included (that one provides the autocomplete functionality)

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

So you need to include jquery.ui.autocomplete.js (Or are you using the plugin autocomplete? if so, move to the jquery UI version)

Could also be that the data from getdata.jsp is malformed for the use in autocomplete.

How you tried debugging the javascript in a browser such as chrome or in firefox(with firebug)

回答3:

I usual give (for jquery UI autocomplete) a JSON formatted answer, while I see your answer loop give a CR delimited list.

In getdata.jsp instead of produce:

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

try to return:

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

来源：https://stackoverflow.com/questions/4639670/how-to-use-jquery-autocomplete

标签

java

javascript

jquery

autocomplete

jquery-autocomplete