使用Coldfusion遠程數據源的jQuery自動完成功能

Question

我研究的每個教程和示例都足以讓我感到非常沮喪。我有一個使用Twitter Bootstrap和jQuery的Coldfusion頁面。我需要一個自動填充功能列出學校。這應該很容易。我根本沒有迴應。沒有錯誤（我可以使用開發工具找到）。

經過這麼多的嘗試，這可能有點混亂。 IE瀏覽器;我不知道source: '/assets/cf/fetchColleges.cfm'和ajax調用之間的區別。我認爲源是本地/客戶端數據源。

HTML：

<div class="row"> 
<div class="span9"> 
<input size="34" type="text" name="CollegeName" id="CollegeName" value="" /> 
    <div id="results"></div> 
</div> 
</div> 

的jQuery：

jQuery(document).ready(function($) { 

    $("#CollegeName").autocomplete({ 
     source: '/assets/cf/fetchColleges.cfm', 
     minLength: 3, 
     select: function(event, ui) { 
      $('#company_id').val(ui.item.id); 
      // go get the company data 
      $.ajax({ 
       type: 'Get', 
       url: '/services/GradTax.cfc?method=GetSchoolsJson&returnformat=json', 
       data: {searchPhrase: query.term}, 
       dataType: 'json', 
       error: function(xhr, textStatus, errorThrown) { 
       // show error 
       alert(errorThrown)}, 
       success: function(result) { 
       response(result); 
       } 
      }); 
     } 
    }); 
}); 

CFC：

<cffunction name="GetSchoolsJson" access="remote" > 
<cfargument name="QueryString" required="true" /> 
<cfquery name="QComp" datasource="#request.dsn_live#"> 
select name 
from companies 
WHERE School_Flag = 'True' AND [Name] LIKE '%#Request.QueryString#%' AND (Status_Flag IS NULL OR Status_Flag = 'A') AND Grad_Tax_Flag = 'True' 
ORDER BY [NAME] ; 
</cfquery> 

<cfset var comp = structNew() /> 
<cfoutput query="QComp"> 
<cfset comp["name"] = '#qcomp.name#' /> 
</cfoutput> 
<cfreturn comp> 
</cffunction> 

Answer 1

的source選項絕對不必是靜態的。事實上，我認爲這主要是你的小部件聲明和選項說明有什麼問題。它看起來像你使用GradTax.cfc作爲你的動態來源。因此，您需要將source選項設置爲通過AJAX調用動態源的函數。在source選項內AJAX成功，您可以撥打source: function(request, response)聲明中提供的response回調。如果你要有一個提供動態結果的函數，那麼這個函數簽名由jQuery指定。在這種情況下，request包含有關您可以使用的自動填充框中當前輸入的信息（您可以使用request.term來通過什麼自動完成，而response表示一旦您的AJAX功能完成後將被調用的回調函數。 。在jQuery UI documentation

您可以搜索source選項來查看幾乎我上面提供的相同的信息，你需要做的（或接近它至少）是（不是順便測試）：

jQuery(document).ready(function($) { 

    $("#CollegeName").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       type: 'Get', 
       url: '/services/GradTax.cfc?method=GetSchoolsJson&returnformat=json', 
       data: {searchPhrase: request.term}, 
       dataType: 'json', 
       error: function(xhr, textStatus, errorThrown) { 
        // show error 
        alert(errorThrown) 
       }, 
       success: function(result) { 
        response(result); //Need to make sure result is an array of objects at 
             // least containing the necessary properties used by 
             // jQuery autocompleter. Each object should, I believe, 
             // contain a 'label' and a 'value' property. See docs for an example: 
             // http://jqueryui.com/autocomplete/#remote-jsonp 
       } 
      }); 
     }, 
     minLength: 3, 
     select: function(event, ui) { 
      $('#company_id').val(ui.item.id); 
      //this should take care of what needs to happen when you actually click/select one of the items that was autocompleted. See documentation above and search for the 'select' option for usage. 
     } 
    }); 
}); 

參照jQuery remote jsonp data source Demo，請注意，在上面的AJAX成功回調中，來自AJAX調用的響應不需要需要是包含value和label屬性的對象數組，但傳遞給response回調的對象確實需要有那些。這正是jQuery演示的工作原理。他們手動$.map響應是基於它們的ajax響應包含value和label的對象數組。 label是實際顯示在自動完成程序界面中的內容，即用戶將看到的內容，而value是設置爲原始輸入值的內容。請注意，在上面的示例中，value也用於select選項。不是世界上最直接的事情，但是當你看到發生了什麼事情時，與它合作並不是太糟糕！

它在JSFiddle中工作。由於自動完成端點將不會被發現，因此您會看到一個404，但是您會看到，如果您觀看開發人員工具，將自動完成的文本傳遞到查詢字符串中（您會收到警報，指出存在錯誤） ，這是一個基本的概念驗證。