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

问题描述:

我知道这个问题之前已经提过很多次,但似乎有许多不同的原因,它不起作用,每个人都有一点不同。Jquery自动完成不显示下拉列表

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

我创建了一个测试自动完成只有一个值的数组(工程)。

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

以下是我收到的示例回复。我相信问题出现在响应开始时的“//”双斜线。

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

*我相信问题是用“//”双斜线*好猜。它是防止跨站点脚本攻击:谢谢你。http://stackoverflow.com/questions/15501123/coldfusion-10-returnformat-json-adding-characters – Leigh

+0

谢谢你。它表示你可以在cffunction中覆盖该设置。你会碰巧知道如何? –

+0

我不相信它可以被覆盖的功能。但是,它可以在Application.cfc的每个应用程序的基础上禁用(谨慎使用),或者您也可以通过添加'$ .ajaxSetup({{'此处显示的功能:http://web.archive.org /web/20130117041105/http://www.raymondcamden.com/index.cfm/2011/11/8/Handling-JSON-with-prefixes-in-jQuery-and-jQueryUI – Leigh

正如雷指出,这是为了防止跨站脚本攻击。并指出我到下面的解决方案:

Coldfusion 10 returnformat="JSON" adding characters

读取解决方案,我发现,您可以通过添加这是一个属性禁用它每cffunction后:

secureJSON="false"

包括之后的一切按预期工作。