带有冷融合的jQuery自动完成功能

Question

我正在尝试使用 ColdFusion 进行简单的 jquery 自动完成，based on Jens great example。

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 结构显示在选择框中。当您单击一个时，它会用整个结构填充它。自动完成似乎对如何处理 json 感到很困惑。

ColdFusion：

    <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>

Jquery：

$(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}
]

选择一个会将整个 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> 

Answer 1

您在那里使用的是非常旧的 JQuery 和 JQuery UI 版本。我无法追踪 JQuery UI 1.8.2，因此无法在类似环境中运行您的代码。如果我使用当前版本，如果我只是将"xhr/merchantAutoComplete.cfm" 作为属性source 的值放入选项对象中，您的代码就可以正常工作，即：

$("#state").autocomplete({
    source : "xhr/merchantAutoComplete.cfm",
    minLength:2, 
    // etc

我使用了这些 JQuery 文件：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

我刚刚从JQuery Autocomplete example on their webpage 上的示例中复制。

我经常发现我使用的是过时版本的 JQUery 库并遵循现代文档，但通常情况下无法正常工作。参数顺序在版本之间发生变化，诸如此类。我不知道这是否是你的问题，但你的代码基本上可以工作。您发布的 CFML 中有一个 coupla 语法错误，但我认为那是因为您没有发布您的实际代码......您发布的代码甚至没有编译，如果它发生在您的环境。

请务必确保在此处发布正确代码。并且发布完整且独立的示例也会有所帮助（您的示例代码不完整，并且对缺少的代码具有外部依赖性）。一些rhetoric from me and some useful links re how/what to post可以在我的博客上找到。