从coldfusion查询形成json以用于jquery自动完成答案

【问题标题】：forming json from coldfusion query for use in jquery autocomplete从coldfusion查询形成json以用于jquery自动完成
【发布时间】：2011-10-18 22:33:03
【问题描述】：

我被难住了。我有一个现有的自动完成功能，该功能在从 ColdFusion 自动建议输入中调用时起作用。现在，我正在尝试将页面转换为使用 jQuery 自动完成输入，但无法使其工作。这是 autosuggest.cfc 中的现有函数：

<cffunction name="lookupSerialNumber" access="remote" returntype="Array" >
    <cfargument name="search" type="any" required="false" default="">

    <!--- Define variables --->
    <cfset var data="">
    <cfset var result=ArrayNew(1)>

    <!--- Do search --->
    <cfquery name="data">
        SELECT DISTINCT SERIAL_NUMBER
        FROM myTable
        WHERE SERIAL_NUMBER LIKE '%#trim(ARGUMENTS.search)#%'
        ORDER BY SERIAL_NUMBER
    </cfquery>

    <!--- Build result array --->
    <cfloop query="data">
        <cfset ArrayAppend(result, list)>
    </cfloop>

    <!--- And return it --->
    <cfreturn result />
</cffunction>

当我在输入“01”后从我的自动完成输入中调用它时，控制台会显示如下响应：

   ["0000003001","0100002000","0100002001","0100002002","0100002003","0100002004",7300000100,7300000101,7300000102,7300000103,7300000104,7300000105,7300000107,7300000108,7300000109,7300000110,7300000111,7300000112]

请注意，前六个响应包含在双引号内，而其余的则不是。自动完成会显示前六个响应，但不显示其余响应。

这是我的第一个问题。第二个是我希望将响应注入到文本和输入值中；目前，只有文本显示响应。我并不感到惊讶，因为我只返回一个值。但是，我不知道如何做到这一点。

我尝试使用解析函数初始化自动完成功能，如下所示：

$(document).ready(function(){
        $('#myInputID').autocomplete(
            {source: function(request, response) {
                $.ajax({
                    url: "cfc/autoSuggest.cfc?method=lookupSerialNumber>&returnformat=json",
                    dataType: "json",
                    data: {
                      search: request.term,
                      maxRows: 10
                    },
                    success: function(data) {
                      response(data);
                    }                   
                })
            },
            parse: function(data){
                return $.map(data, function(item) {
                    return { data: item, value: item, result: item };
                });
            }
        });
    });

但这什么也没做。由于 parse 函数不在自动完成 API 中，所以我在这里瞎了眼。

我认为这些问题足够相关，不能将它们分成两个问题；让我知道你是否认为我应该这样做。一如既往，谢谢。

【问题讨论】：

我会把剩下的留给其他更有资格的人；）但引用可能是由于隐式转换。前六个值显然不是数字，因为它们以前导“0”开头。其余的可能被视为数字。
@Leigh 自动完成（以及 OP 的 ajax）期待 json 回来。它没有得到它。 autcomplete 还需要一个 label 或 value 字段或两者来填充输入。
@jk - 有道理。我在想它应该是json 格式。但除此之外没有什么可提供的；）

标签： jquery json coldfusion jquery-autocomplete

【解决方案1】：

将您的查询结果放入一个结构中并将其添加到一个数组中。然后转成json。自动完成需要返回 json 和 label 或 value 字段或两者。这是一个例子：

<cffunction name="lookupSerialNumber" access="remote" returntype="String" >
    <cfargument name="search" type="any" default="">

    <!--- Define variables --->
    <cfset var data="">
    <cfset var result=ArrayNew(1)>
    <cfset var returnStruct = "">


    <!--- Do search --->
    <cfquery name="data">
        SELECT DISTINCT SERIAL_NUMBER
        FROM myTable
        WHERE SERIAL_NUMBER LIKE <cfqueryparam value="%#trim(ARGUMENTS.search)#%" 
                                     cfsqltype="cf_sql_varchar">

        ORDER BY SERIAL_NUMBER
    </cfquery>

    <!--- Build result array --->
    <cfloop query="data">
        <cfset returnStruct = StructNew() />
        <cfset returnStruct["label"] = SERIAL_NUMBER />

        <cfset ArrayAppend(result,returnStruct) />
    </cfloop>

    <!--- And return it --->
    <cfreturn serializeJSON(result) />
 </cffunction>

您可以使用serializeJSON 函数，如果它在您使用的任何版本的CF 中可用。如果没有，请手动构建 json 字符串。

这里是一个 tut：http://www.jensbits.com/2010/03/18/jquery-ui-autocomplete-with-coldfusion/

【讨论】：

谢谢jk。我也为您的网站添加了书签。当然希望自动完成 API 更加完善。
对于那些无法访问该网站的人，这里是博客的存档：web.archive.org/web/20100829022115/http://www.jensbits.com:80/…

【解决方案2】：

刚刚在寻找类似的解决方案时遇到了这个问题，但我必须说，返回结构数组并不遵循大多数 JSON AJAX 返回的约定，即使在使用 serializeJSON 之后也是如此。

另一个答案返回类似

[{key:value}, {key:value}, {key:value}...]

而通常，你想看到

{key:value,key:value,key:value...}

所以这是我为需要使用后一种格式的人调整的代码版本

<cffunction name="lookupSerialNumber" access="remote" returntype="String" >
<cfargument name="search" type="any" required="false" default="">

<!--- Define variables --->
<cfset var data="">
<cfset var result=StructNew()> <!--- Is now a Struct instead of Array --->

<!--- Do search --->
<cfquery name="data">
    SELECT DISTINCT SERIAL_NUMBER
    FROM myTable
    WHERE SERIAL_NUMBER LIKE '%#trim(ARGUMENTS.search)#%'
    ORDER BY SERIAL_NUMBER
</cfquery>

<!--- Build result array --->
<cfloop query="data">
  <cfset returnStruct = StructNew() />
  <cfset returnStruct["label"] = SERIAL_NUMBER />

  <cfset StructAppend(result,returnStruct) /> 
  <!--- Append the temporary struct to the main struct --->
</cfloop>

<!--- And return it --->
<cfreturn serializeJSON(result) />

这样做的好处是更容易解析：

$.ajax({
  url: 'path/to.cfc',
  dataType: 'json',
  data: {
    search: searchWord
  }
  success: function(data) {
    //Easy Parsing Bit here...
    $.each(data, function(key, val) {
      alert(key + ': ' + val); 
    })
  }
})

而在此之前，您必须输入数组然后解析各个 JSON 条目...

【讨论】：

你知道什么...无视这一点。我想我正在投票删除我自己的答案……我的答案更简单。可能对某些人有帮助，但并不能真正回答 OP 问题。

【解决方案3】：

在 OO 时尚中使用 Mura CMS 进行 CFRemoting ...

snProxy.cfc

<cfcomponent extends="mura.cfobject">

    <cfset variables.searchterm = ''>

    <cffunction name="get" access="remote" output="true">
    <cfargument name="searchterm" required="true">

        <cfset var $=getBean("MuraScope").init(session.siteid)>    
        <cfset variables.searchterm = arguments.searchterm >    

        <cfquery name="get" datasource="#request.dsn#">
                SELECT DISTINCT SERIAL_NUMBER    
                FROM tbl_serial_numbers 
                WHERE SERIAL_NUMBER like <cfqueryparam value="%#variables.searchterm#%" cfsqltype="cf_sql_varchar" />
        </cfquery>

        <cfset response = listToArray(valueList(get.SERIAL_NUMBER))>
        <cfset data = #createobject("component","mura.json").encode(response)#>

        <cfreturn data />

    </cffunction>    

</cfcomponent>

JQuery 绑定 ...

<script type="text/javascript">
    $(function() {
        $("input##serial_numbers").autocomplete({
        source: "/com/snProxy.cfc?method=get&returnFormat=json",
        minLength: 1
        });
    });
</script>

【讨论】：