javascript 如何使用jquery自动完成？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4639670/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to use jquery autocomplete?
提问by sutoL
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.
我正在使用 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
获取数据.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?
如果我没有错，我是从网站上读到的，参数 q 是默认值并且就在那里，但是我如何显示数据？我如何将 getdata.jsp 中的值传递到自动完成中？
回答by Yahel
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.
您在包含 jQuery 之前调用自动完成脚本标记。因此，如果没有 jQuery 锁定（因为尚未定义 jQuery 对象），jQuery 自动完成插件中的任何内容都不会加载。
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.
颠倒顺序，你提到的 Firebug 错误应该会消失；我不确定它会解决所有问题，但在解决之前什么都不会起作用。
回答by RvdK
I don't see jQuery UI being included (that one provides the autocomplete functionality)
我没有看到包含 jQuery UI（那个提供自动完成功能）
http://jqueryui.com/demos/autocomplete/
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)
所以你需要包含 jquery.ui.autocomplete.js （或者你是否使用插件自动完成？如果是，请移至 jquery UI 版本）
Could also be that the data from getdata.jsp is malformed for the use in autocomplete.
也可能是 getdata.jsp 中的数据格式错误，无法用于自动完成。
How you tried debugging the javascript in a browser such as chrome or in firefox(with firebug)
您如何尝试在 chrome 或 firefox（使用 firebug）等浏览器中调试 javascript
回答by Ivan Buttinoni
I usual give (for jquery UI autocomplete) a JSON formatted answer, while I see your answer loop give a CR delimited list.
我通常会给出（对于 jquery UI 自动完成）一个 JSON 格式的答案，而我看到你的答案循环给出了一个 CR 分隔列表。
In getdata.jsp instead of produce:
在 getdata.jsp 中而不是产生：
jim<cr>
Hyman>cr>
jhon<cr>
try to return:
尝试返回：
[{label: 'jim', value: 'jim'}, {label:
'Hyman', value: 'Hyman'}, {label:
'jhon', value: 'jhon'}]
