如何使用jquery自动完成？答案

【问题标题】：how to use jquery autocomplete?如何使用jquery自动完成？
【发布时间】：2011-06-06 02:18:45
【问题描述】：

我正在使用 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 中的值传递给自动完成？

【问题讨论】：

应该有 2 个文件，这可能会有所帮助：viralpatel.net/blogs/2009/06/…
嗨，这是我去的网站，但它没有提供足够的文档，并且代码是两个代码，不知何故没有分开

标签： java javascript jquery autocomplete jquery-autocomplete

【解决方案1】：

我通常给（用于 jquery UI 自动完成）一个 JSON 格式的答案，而我看到你的答案循环给出一个 CR 分隔列表。

在 getdata.jsp 中而不是产生：

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

尝试返回：

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

【讨论】：

【解决方案2】：

您在包含 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 错误应该会消失；我不确定它会解决所有问题，但在解决之前没有任何效果。

【讨论】：

【解决方案3】：

我没有看到包含 jQuery UI（那个提供自动完成功能）

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

所以你需要包含 jquery.ui.autocomplete.js （或者你是否使用插件自动完成？如果是，请移至 jquery UI 版本）

也可能是来自 getdata.jsp 的数据格式不正确，无法用于自动完成。

您如何尝试在 chrome 或 firefox（使用 firebug）等浏览器中调试 javascript

【讨论】：

不，jquery ui 是干什么用的？我以为我只需要包含来自 google 的 jquery 库、自动完成 api 和它的 css
嗨，刚刚使用了萤火虫，我得到的错误是 jQuery 没有定义，$("#search").autocomplete 不是一个函数
这意味着执行 .autocomplete 时没有加载 jQuery 库。您应该将调用包装在 $(document).ready(function() { $("#search").autocomplete("getdata.jsp"); }
如果您一般不阅读有关自动完成或 jquery 的文档，那么您将永远无法运行它。您现在使用的自动完成功能来自一个插件，这个插件不再需要，因为自动完成功能已添加到 jquery UI（与其他 UI 组件）
嗨，我阅读了文档，但我不明白为什么在下载 UI 时包含很多文件。我找不到这些文件的含义