jQuery自动完成不显示文本值，但填充元素 [英] jQuery autocomplete not displaying text values but populates elements

问题描述

我有一个jQuery自动完成功能正常，除了它不正确地显示在函数中返回的文本值。我的后端是ColdFusion。

I have a jQuery autocomplete that is functioning properly, except it is improperly displaying text values returned in the function. My backend is ColdFusion.

后端函数（在CFC中）：

Backend Function (in a 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标签中，需要第二个哈希标记作为转义值）：

My jQuery javascript (it's wrapped in cfoutput tags, necessitating a second hash mark as an escape value):

        $(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作为我的测试值时， p>

When I use type in 'test' as my test value, this is the returned JSON:

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

列表已填充，但填充有空字符串。如果我选择一个，隐藏的defaultcompanyid值会填充一个数字，但defaultcompanyname值会清空我的文本。

The list is populating, but it populates with empty strings. If I select one, the hidden defaultcompanyid value does populate a number, but the defaultcompanyname value empties my text. What am I missing?

编辑：根据部分解决原始问题的回应，更新了包含新信息的问题。

Updated question with new information based on responses that partially resolved original problem.

推荐答案

最简单的解决方案可能是调整你的JSON。
jQueryUI期望数据格式为

The easiest solution is probably to adjust your JSON. jQueryUI expects the data to be fomatted like

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

然后更改 select / code>方法：

Then change your select() method:

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

如果您无法更改JSON，请尝试操作 _renderItem（）方法，请查看示例源代码

If you can't alter the JSON, try to manipulate the _renderItem() method, have a look at the example source code in the docs.

编辑：请查看此小提琴

这篇关于jQuery自动完成不显示文本值，但填充元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！