在 JSP 中使用 Jquery Ajax 自动完成

Question

我正在尝试关注this 示例 我在 JSP 页面中有以下内容

(getData.jsp)

Department t = new Department ();    
    String query = request.getParameter("q");    
    List<String> tenders = t.getDepartments(query); 

    Iterator<String> iterator = tenders.iterator();
    while(iterator.hasNext()) {
        String deptName= (String)iterator.next();
        String depto = (String)iterator.next();
        out.println(deptName);
    }

如何在 Jquery autcomplete 中使用上述内容？当我尝试时没有输出。

我的 Jquery 自动完成代码

 <script>
$(function() {

$( "#dept" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "getData.jsp",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function( data ) {
response( $.map( data.<??>, function( item ) {
return {
label: item.name + (item.<??> ? ", " + item.<??> : "") + ", " + item.<??>,
value: item.name
}
}));
}
});
},
minLength: 2,
select: function( event, ui ) {
alert(ui.item.label);
}
});
});
</script>

Answer 1

您的回复是 JSON 格式吗？

这是我在使用 Jquery UI 自动完成时所做的：

1. 创建一个类，其参数是您说 item.name 时将使用的参数

   public string Pam1{ get; set; }
   
   public string Pam2{ get; set; }
   
   public string Pam3{ get; set; }
   
   
   public SomeResponse(string SomePam)
   {
       // Pam1 = ???
       // Pam2 = ???
       // Pam3 = ??? 
   }
   

2. 在你的处理程序中：

       context.Response.ContentType = "application/json";
       string query = (string)context.Request.QueryString["query"];
       var json = new JavaScriptSerializer();
   
       context.Response.Write(
           json.Serialize(new SomeResponse(query))
       );
   
       context.Response.Flush();
       context.Response.End();
   

编辑

1. javascript（这里是一个示例，用户可以选择多个选项，用逗号分隔。如果您不想要，请将其删除。） txt_autocomplete 是 TextBox 的类。

   $(function () {
       function split(val) {
           return val.split(/,\s*/);
       }
   
       function extractLast(term) {
           return split(term).pop();
       }
   
       $(".txt_autocomplete")
       // don't navigate away from the field on tab when selecting an item
       .bind("keydown", function (event) {
           if (event.keyCode === $.ui.keyCode.TAB &&
               $(this).data("ui-autocomplete").menu.active) {
               event.preventDefault();
           }
       })
           .autocomplete({
           source: function (request, response) {
               $.getJSON("handlers/autocomplete.ashx?query=" + extractLast(request.term), {
                   term: extractLast(request.term)
               }, response);
           },
           search: function () {
               var term = extractLast(this.value);
               if (term.length < 2) {
                   return false;
               }
           },
           focus: function () {
               return false;
           },
           select: function (event, ui) {
               var terms = split(this.value);
               terms.pop();
               terms.push(ui.item.Pam1);
               terms.push("");
               this.value = terms.join(", ");
               console.log("Pam1 is :" + ui.item.Pam1 + " Pam2 is: " + ui.item.Pam2 + " Pam 3 is : " + ui.item.Pam3);
               return false;
           }
       });
    });