jquery-ui - jQueryを使用して「都市」を返すオートコンプリート

Question

「State」と「City」の 2 つのボックスを選択しました。ここでは、ブランチの値が状態に基づいて入力されます。これを行うのに役立つコードスニペットを次に示します。

@RequestMapping(value = "getBranchlist.htm", method = RequestMethod.GET, headers = "Accept=*/*")

    public  @ResponseBody String getBranchList(@RequestParam("state")String state) {

          ApplicationContext context = 
                     new ClassPathXmlApplicationContext("Beans.xml");

          MasterJDBCTemplate dao = 
                  (MasterJDBCTemplate)context.getBean("masterJDBCTemplate");

           List<String> fans = dao.getBranchList(state);
           String branch = "";
           for(String fan : fans)
           branch+=fan+",";
           if(branch.length()== 0){
               branch = "";
           }else{
           branch = branch.substring(0, branch.length() - 1);
           }
           return branch;
    }

そしてjQueryコード

$(function(){
     $("#state").change(function(){
      var state = $("#state").val();
      $.get("getBranchlist.htm",{ "state":state},function( data ) { 
            var target = $("#branch");
            target.find('option').remove();
            target.append($('<option/>').val("").text("---Select"));
            if(data == ""){
                return false;
            }
            var opts = data.split(',');
            $.each(opts, function(i, opt){
                   target.append(
                            $('<option/>').val(jQuery.trim(opt)).text(jQuery.trim(opt)));
            });  
      });
  });
});

これはうまくいきます。これは私が得た限りです。

ここに示すように、オートコンプリート（データベース内のすべてのブランチを表示）機能を使用してみました ---> http://jqueryui.com/autocomplete/#remote

だから私はこれをやってみました

$(function() {
$( "#branch" ).autocomplete({ source: "getBranchlist.htm" });
}

ただし、出力が得られません。「JSON」を返すには、コントローラーを少し変更する必要があると思います。私のコントローラーは何を返すべきですか？どのような形式で？「オハイオ」、「ミラノ」、「シドニー」を表示したい場合は言ってください。