jquery - コールドフュージョンによるJqueryオートコンプリート

Question

Jens great example に基づいて、ColdFusion を使用して簡単な jquery オートコンプリートを実行しようとしています。

HTML:

<form name="merchantSearch" id="merchantSearch" method="post" action="/index.cfm/shop.store/">                  
        <input type="text" name="state" id="state"/>
        <input type="submit" name="submit" id="submit" value="" class="searchButton"/>                          
        <input type="hidden" name="merchantID" id="merchantID"/>
 </form>

json 構造体全体が選択ボックスに表示されます。1 つをクリックすると、構造体全体が入力されます。オートコンプリートは、json をどうするかについて本当に混乱しているようです。

コールドフュージョン:

    <cfloop query="request.qMerchants">
        <cfset request.merchantStruct = StructNew()>
        <cfset request.merchantStruct["merchantID"] = #request.qMerchants.merchantID#>

        <cfset request.altText = altText..."
        <cfset request.merchantStruct["label"] = #request.qMerchants.merchant#&#request.altText#>

    <cfset ArrayAppend(request.merchantArray, request.merchantStruct)>
</cfloop>


<cfoutput>  
    #serializeJSON(request.merchantArray)#
</cfoutput>

Jクエリ:

$(document).ready(function(){

     $("#state").autocomplete(          
           "xhr/merchantAutoComplete.cfm",     
           {
           minLength:2, 
           minchars:2,
           autoFill:false,
           select:function(event,ui) {
               $("#merchantID").val(ui.item.merchantID);
               $("#merchant").val(ui.item.merchant);
             }
           }
      );     

});

CF ファイルは json 形式のデータを返しますが、json のままです。結果は次のようになります。

[
 {"label":"AAA 112 pts\/$","merchantID":6},
 {"label":"BBB 64 pts\/$","merchantID":62},
 {"label":"CCC  48 pts\/$","merchantID":277},
 {"label":"DDD 144 pts\/$","merchantID":278},
 {"label":"EEE  80 pts\/$","merchantID":279}
]

1 つを選択すると、json 構造体全体が選択ボックスに配置されます。何かを取得するための適切な jquery、jquery UI、および css ファイルのグループがあると思いますが、これを実際に肥大化させるためだけに投稿します。

<script src="/assets/js/jquery/jquery.autocomplete.js"></script>
<script src="/assets/js/jquery/jquery1.4.2.js"></script>
<link rel="stylesheet" href="/assets/css/jquery.autocomplete.css" type="text/css" media="screen, projection" />
<script src="/assets/js/jquery/jquery-ui-1.8.2.js"></script>

「ラベル/値」の問題だと確信していますが、何も役に立たないようです。どんな提案も素晴らしいでしょう..ありがとう!! ジョン

これはまだ分かっていません。リモート呼び出しは適切にフォーマットされた json 構造体を返していると思います。次のようになります:
[{"value":"FedEx Office 48 pts per $","id":578},{"value":"Fergie Shoes.com 88 pts per $","id":784}]

オートコンプリート js は次のようになります。

 $(document).ready(function(){
     $("#merchantLabel").autocomplete(          
               "xhr/merchantAutoComplete.cfm",     
              {           
               select:function(event,ui) {
                   $("#merchantID").val(ui.item.id);  
                   return false;
                }
              }
         ); 
    });

html は次のようになります。

 <form name="merchantSearch" id="merchantSearch" method="post" action="/index.cfm/shop.store/">                  
        <input type="text" name="merchantLabel" id="merchantLabel"/>
        <input type="submit" name="submit" id="submit" value="" class="searchButton"/>                          
        <input type="hidden" name="merchantID" id="merchantID"/>  
    </form>