json - JSP で Jquery Ajax を使用したオートコンプリート

Question

私はこの例に従おうとしています.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 autocompleteで使用するにはどうすればよいですか? 私が試したとき、出力は来ませんでした。

私の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;
           }
       });
    });