Заполнение автозаполнения jQuery UI с данными из базы данных с использованием JSP + AJAX

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

%> 

I «Я пытался следовать нескольким учебным материалам в Интернете, но большинство из них, за которыми я слежу, предназначены для php not jsp или для более старых версий автозаполнения jquery. Я чувствую, что мне не хватает чего-то маленького, но я долго смотрел на него. Может ли кто-нибудь взглянуть и посмотреть, не пропал ли я что-нибудь?

Answer 1

Прежде всего, ваш код не завернутый в $(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 ожидает действительный JSON вместо строки. Таким образом, вместо этого:

[Jack, Jill, John] 

Ваша программа должна вывести:

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

PS: Ваш запрос открыт для SQL инъекций.

Answer 2

Ваш outsideIn.jsp должен быть возвращающие JSON отформатированный данные.

От официальных документов: «Источник данных - это сценарий на стороне сервера, который возвращает данные JSON, заданные с помощью простого URL-адреса для опции источника. Кроме того, для параметра minLength установлено значение 2, чтобы избежать запросов, которые возвращают слишком много результатов, и select-event используется для отображения некоторой обратной связи ».

Смотрите здесь для получения дополнительной информации: link

Ура :)