JSP + AJAX를 사용하여 데이터베이스의 데이터로 jQuery UI 자동 완성 구현하기

Question

지금이 작업을 며칠 동안 진행하려고 노력하고 있으며 가지고있는 코드로 아무 것도 얻지 못하고 있습니다. 자동 완성 기능을 사용하려고하는 영업 사원 외부에 나열해야하는 텍스트 상자가있는 양식이 있습니다.

이

이가 내 데이터베이스에서 데이터가 자동 완성

<% 
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에 사용할 얻기 위해 사용하고있는 코드가

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

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

형태 (doorform2.jsp) 코드입니다 've는 온라인으로 여러 튜토리얼을 따라 가려고했지만, 내가 따라 왔던 대부분의 것들은 jsp가 아닌 PHP 나 jquery autocomplete의 이전 버전을위한 것이다. 나는 작은 것을 놓치고있는 것처럼 느낀다. 그러나 그것을보기 위해 오랫동안 그것을보고 있었다. 아무도 볼 수 없으며 내가 무엇을 놓치고 있는지 볼 수 있습니까?

Answer 1

먼저, 코드는 $(document).ready() 내부에 랩되지 않습니다.

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

# 2 :

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

는 다음과 같이 코드를 개정 : 다음은 예상대로 작동하지 않습니다 원본 매개 변수로 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 형식의 데이터를 반환해야합니다.

공식 문서 출처 : "데이터 소스는 source-option에 대한 간단한 URL을 통해 지정된 JSON 데이터를 반환하는 서버 측 스크립트입니다. 또한 minLength 옵션은 2로 설정되어 있으므로 너무 많은 결과를 반환하고 선택 이벤트는 일부 피드백을 표시하는 데 사용됩니다. "

는 더 많은 정보를 보시려면 여기를 참조하십시오 : link

건배 :) 모든