Question

我正在尝试使用ColdFusion based on Jens great example进行简单的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结构显示在选择框中。当您单击一个时，它会使用整个结构填充它。自动完成似乎真的很混淆如何处理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}]

autocomplete 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的值放入options对象中，则代码可以正常工作，即：

$("#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。

Jquery自动完成与coldfusion

1 个答案: