Jquery自动完成未显示下拉列表

时间:2016-05-17 18:26:10

标签: jquery autocomplete coldfusion

我知道这个问题之前已被多次提出过,但似乎有许多不同的原因,它不起作用,每一个都有一点不同。

我相信我的问题出在我的JSON响应中。 (如果这是一个因素,我正在使用ColdFusion)。我做了一个空白的测试页面来尝试这个,所以我知道没有别的东西可以搞砸了。

我使用一组值(WORKS)创建了一个测试自动完成。

$("##txtLanguage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });

但是,我试图让动态自动完成工作。我正在使用它与cfc并收到回复。但是,该字段的自动完成功能不起作用。

<script type="text/javascript">
    $(document).ready(function() {
        $("##txtLanguage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });

        $("##name").autocomplete({
            source: function(query, response) {
                $.ajax({
                    url: "/cfc/autocomplete.cfc?method=queryNames&returnformat=json",
                    dataType: "json",
                    data: {
                        searchPhrase: query.term
                    },
                    success: function(result) {
                        response(result);
                    }
                });
            }
        });
    });
</script>

以下是我收到的示例回复。我相信问题出在&#34; //&#34;在该响应开头的双斜线。

Sample response received

整页代码:

<cfset pageTitle = "Self Help Admin">

<cfoutput>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $("##txtLanguage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });

        $("##name").autocomplete({
            source: function(query, response) {
                $.ajax({
                    url: "/cfc/autocomplete.cfc?method=queryNames&returnformat=json",
                    dataType: "json",
                    data: {
                        searchPhrase: query.term
                    },
                    success: function(result) {
                        response(result);
                    }
                });
            }
        });
    });
</script>

<form>
    test    <input type="text" id="txtLanguage"/>
    User: <input type="text" id="name" />
    <input type="button" id="submit" value="Submit" />
</form>
<br>
</cfoutput>

完整cfc代码:

<cfcomponent>
    <cfinclude template = "init.cfm">

    <!--- ================================================================== --->
    <!---                  user Autocomplete                                 --->
    <!--- ================================================================== --->   
    <cffunction name="queryNames" access="remote">
        <cfargument name="searchPhrase">

        <cfquery name="query_names" dataSource="#dsn.yTen#">
            SELECT    name
            FROM      users
            WHERE     LOWER(name) LIKE <cfqueryparam cfsqltype='cf_sql_varchar' value="%#LCASE(arguments.searchPhrase)#%">
            ORDER BY  name
        </cfquery>

        <cfset result = arrayNew(1) >

        <cfloop query="query_names">
            <cfset ArrayAppend(result, query_names.Name)>
        </cfloop>

        <cfreturn result>
    </cffunction>

</cfcomponent>

1 个答案:

答案 0 :(得分:1)

Leigh指出这是为了防止跨站点脚本攻击。并指出了以下解决方案:

Coldfusion 10 returnformat="JSON" adding characters

在阅读该解决方案后,我发现您可以通过将此属性添加为cffunction来禁用它:

secureJSON="false"

包括一切按预期工作。