Jquery 使用 Coldfusion 自动完成

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 分","id":578},{"value":"Fergie Shoes.com 每美元 88 分","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可以在我的博客上找到。