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

I've been trying to get this to work for a couple of days now and I'm not getting anything with the code I have. I have a form that has a textbox that needs to list outside salesmen that I am trying to use autocomplete.

我一直试图让这个工作几天,而且我没有得到任何代码。我有一个表单,其中有一个文本框,需要列出我尝试使用自动完成的外部销售人员。

This is the code for the form (doorform2.jsp)

这是表单的代码(doorform2.jsp)

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

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

This is the code that I am using to get data from my database to use for the autocomplete

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

<%
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);

%>

I've tried to follow several tutorials online but most of the ones that I have been following are for php not jsp or they are for older versions of jquery autocomplete. I feel like I am missing something small but have been looking at it to long to see it. Can anyone take a look and see if I am missing anything?

我曾尝试在线跟踪几个教程,但我一直关注的大多数是php而不是jsp,或者它们是旧版本的jquery自动完成。我觉得我错过了一些小东西,但一直看着它很久才看到它。任何人都可以看一看,看看我是否遗漏了什么?

2 个解决方案

#1

First of all, your code is not wrapped inside $(document).ready(). The following will not work as expected:

首先,您的代码不包含在$(document).ready()中。以下内容无法按预期工作:

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

Revise your code like this:

像这样修改你的代码:

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

#2: when you specify a URL as the source parameter, jQuery UI will send a request that contains the query string parameter term. So you need to modify your code accordingly:

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

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

#3: the jQuery UI expects a valid JSON instead of a string. So instead of this:

#3:jQuery UI需要一个有效的JSON而不是一个字符串。所以不是这样的:

[Jack, Jill, John]

Your program needs to output:

你的程序需要输出:

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

PS: your query is open to SQL injection.

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

#2

Your outsideIn.jsp must be return a JSON formated data.

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

From official docs: "The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback."

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

See here for more informations: link

有关更多信息,请参见此处:链接

Cheers :)

#1