使用 JSP+AJAX 使用数据库中的数据填充 jQuery UI 自动完成功能

Question

几天来我一直在努力让它工作，但我没有得到任何我拥有的代码。我有一个表单，它有一个文本框，需要列出我正在尝试使用自动完成功能的外部推销员。

这是表单的代码（doorform2.jsp）

<script>
    $("#outsideSales").autocomplete({source: "outsideIn.jsp",minLength: 2});
</script>

<input type="text" name="outsideSalesman" id="outsideSales" required>

这是我用来从数据库中获取数据以用于自动完成的代码

<%
Connection con = null;
Statement stmt = null;
ResultSet rs = null;

Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
con = DriverManager.getConnection("jdbc:sqlserver://nemesis:1433;instanceName=gfi;databaseName=NationalFormsRepository;user=portal;password=P0rtal");
stmt = con.createStatement();

String outside = request.getParameter("outsideSalesman");

ArrayList<String> outsideSalesmenNames = new ArrayList<String>();
String outsideSalesman = "SELECT outsideSalesName FROM tbl_outsideSales WHERE outsideSalesName like '%"+outside+"%'";

rs = stmt.executeQuery(outsideSalesman);

while(rs.next())
{
    outsideSalesmenNames.add(rs.getString("outsideSalesName"));
}
out.println(outsideSalesmenNames);

%>

我尝试在线学习几个教程，但我一直关注的大多数教程是针对 php 而不是 jsp 的，或者它们是针对旧版本的 jquery 自动完成的。我觉得我错过了一些小东西，但一直在看它很久才能看到它。谁能看看我是否遗漏了什么？

Answer 1

您的 outsideIn.jsp 必须返回 JSON 格式的数据。

来自官方文档：“数据源是一个服务器端脚本，它返回 JSON 数据，通过 source-option 的简单 URL 指定。此外，minLength-option 设置为 2 以避免查询会返回太多结果，并且选择事件用于显示一些反馈。”

更多信息请看这里：link

干杯:)

Answer 2

首先，您的代码没有包含在$(document).ready() 中。以下将无法按预期工作：

<script>
$("#outsideSales").dosomething();
</script>
<!-- Note: #outsideSales does not exist before this line -->
<input id="outsideSales">

像这样修改你的代码：

<script>
$(document).ready(function(){
    $("#outsideSales").dosomething();
});
</script>
<input id="outsideSales">

#2：当你指定一个 URL 作为源参数时，jQuery UI 将发送一个包含查询字符串参数term 的请求。所以你需要相应地修改你的代码：

String outside = request.getParameter("term");

#3：jQuery UI 需要 valid JSON 而不是字符串。所以不要这样：

[Jack, Jill, John]

你的程序需要输出：

["Jack", "Jill", "John"]

PS：您的查询对 SQL 注入开放。