2016-05-17 77 views
2

我知道這個問題之前已經提過很多次,但似乎有許多不同的原因,它不起作用,每個人都有一點不同。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

回答

1

正如雷指出,這是爲了防止跨站腳本攻擊。並指出我到下面的解決方案:

Coldfusion 10 returnformat="JSON" adding characters

讀取解決方案,我發現,您可以通過添加這是一個屬性禁用它每cffunction後:

secureJSON="false"

包括之後的一切按預期工作。

相關問題