jQuery自動完成不顯示文本值，但填充元素

我有一個jQuery自動完成功能正常，除非它不正確地顯示函數中返回的文本值。我的後端是ColdFusion。jQuery自動完成不顯示文本值，但填充元素

後端功能（在CFC）：

<cffunction name="companyNameList" access="remote" output="false" hint="I return a list of companies with IDs" returnformat="JSON"> 
    <cfargument name="searchterm" required="false" default="" /> 

    <cfset var returnArray = arrayNew(1) /> 

    <cfquery name="companyNameList" datasource="#request.dsn#"> 
     SELECT companyID, companyName 
     FROM tbl_companies 
     WHERE companyName LIKE <cfqueryparam cfsqltype="cf_sql_varchar" value="%#arguments.searchterm#%" /> 
    </cfquery> 

    <cfloop query="companyNameList"> 
     <cfset companyStruct = structNew() /> 
     <cfset companyStruct['value'] = companyID /> 
     <cfset companyStruct['label'] = companyName /> 

     <cfset arrayAppend(returnArray,companyStruct) /> 
    </cfloop> 

    <cfreturn returnArray /> 
</cffunction>

我的jQuery JavaScript的（它包裹在CFOUTPUT標籤，迫使第二散列標記作爲轉義值）：

 $(function() {    
     $("##defaultcompanyname").autocomplete({ 
      source: function(request, response){ 
       $.ajax({ 
        url: "secure/cfc/ajax.cfc?method=companyNameList", 
        dataType: "json", 
        data: { 
         searchterm: request.term 
        }, 
        success: function(data){ 
         response(data); 
        } 
       }) 
      }, 
      minLength: 3, 
      select: function(event, ui) { 
       $('##defaultcompanyid').val(ui.item.value); 
       $('##defaultcompanyname').val(ui.item.label); 
      } 
     }); 
    });

及相關表格塊：

 <p class="ui-widget"> 
      <label for="defaultcompanyname">Default Company Association</label> 
      <cfinput type="text" size="30em;" name="defaultcompanyname" id="defaultcompanyname" value="" /> 
      <cfinput type="hidden" name="defaultcompanyid" id="defaultcompanyid" value="0" /> 
     </p>

當我在'test'中使用type作爲測試值時，這是返回的JSON：

[{"value":2,"label":"Test Company"},{"value":3,"label":"2nd Test Company"}]

該列表正在填充，但會填充空字符串。如果我選擇一個，隱藏的defaultcompanyid值會填充一個數字，但defaultcompanyname值會清空我的文本。我錯過了什麼？

編輯：根據部分解決原始問題的答覆，根據新信息更新問題。

來源

2013-02-06 K_Cruz

最簡單的解決方案可能是調整您的JSON。 jQueryUI的預期數據進行fomatted像

[ 
    { 
     "id": 2, 
     "label": "Test Company" 
    }, 
    { 
     "id": 3, 
     "label": "2nd Test Company" 
    } 
]

然後更改您select()方法：

select: function (event, ui) { 
     $('#defaultcompanyid').val(ui.item.id); 
     $('#defaultcompanyname').val(ui.item.label); 
    }

如果你不能改變JSON，試圖操縱_renderItem()方法，有一個看看example source code in the docs。

編輯：有一個在這個fiddle

來源

2013-02-06 21:56:59 Thorsten

我添加了一個小提琴鏈接，請看看它 – Thorsten

@Thorsten雙##是因爲他的代碼是一個CFOUTPUT內和ColdFusion使用英鎊符號在評估中，請確保您閱讀了整個問題 – Lance

我不得不離開這個問題並轉移到其他方面，但我已經能夠用新鮮的眼睛回到它，並注意到我沒有正確更新我的代碼。您的解決方案完全解決了問題。感謝您的幫助。 –

jQuery自動完成不顯示文本值，但填充元素

回答

相關問題