jQuery .val() 不适用于 jQueryUI 自动完成功能

Posted

技术标签:

【中文标题】jQuery .val() 不适用于 jQueryUI 自动完成功能【英文标题】:jQuery .val() not working with jQueryUI autocomplete 【发布时间】:2013-07-16 11:54:27 【问题描述】:

我在一个表单上有两个 jQueryUI 自动完成功能。一个以另一个为食。我的目标是让第一个字段自动完成并将 ID 填充到(打算成为)隐藏字段。第二个自动完成对远程页面进行 Ajax 调用,将第一个自动完成的 ID 传递给它。

这主要是有效的。第一个自动完成功能正常,它使用适当的值填充 companyID 字段。

我的问题是第二个自动完成总是将值 0 传递给 Ajax 请求的页面。就好像在第二个自动完成中调用源返回的 .val() 没有正确读取 companyID 字段的值。

更令人抓狂的是,当社区字段发生变化时,我会调用 alert(),它会报告正确、准确的 companyID! 啊!

我的 jQuery:

<script>
    $(document).ready(function() 
        var Companies = [
             label: 'America First Properties', value: '6' ,
             label: 'Western National Group', value: '7' ,
             label: 'Greystar Property Management', value: '8' ,
        ]

        $('#Company').autocomplete(
            autoFocus:  true,
            delay:      0,
            minLength:  2,
            source:     Companies,
            select:     function(event,ui) 
                            $('#companyID').val(ui.item.value);
                            $('#Company').val(ui.item.label);
                            $('#Community').val('');
                            return false;
                        ,
            change:     function(event,ui) 
                        
        );

        $('#Community').autocomplete(
            autoFocus:  true,
            delay:      200,
            minLength:  2,
            select:     function(event,ui) 
                            $('#communityID').val(ui.item.value);
                            $('#Community').val(ui.item.label);
                            return false;
                        ,
            change:     function(event,ui) 
                            alert("The value of the company ID field is: " + $('#companyID').val());
                        ,
            source:     '/Community/ajax_getCommunities.cfm?companyID=' + $('#companyID').val()
        );
    );
</script>

还有我的 html

<form name="addCommunityform" id="addCommunityform" action="act_addCommunity.cfm" method="post">    
    <fieldset>
        <label>Intended to be Hidden Fields:</label>
        <label>companyID:</label>
        <input type="text" name="companyID" id="companyID" value="0">
        <label>communityID:</label>
        <input type="text" name="communityID" id="communityID" value="0">
    </fieldset>

    <fieldset>
        <label for="Company">Property Management Company:</label>
        <input type="text" name="Company" id="Company" value="">
    </fieldset>

    <fieldset>
        <label for="Community">Community Name:</label>
        <input type="text" name="Community" id="Community" value="">
    </fieldset>
</form>

有人知道为什么这个 .val() 不起作用吗?

【问题讨论】:

顺便说一句:这也在 ColdFusion 页面上,因此需要使用 ## 转义一些井号。如果有任何错误的留下,那是因为我在发布之前忘记将它们取出。 【参考方案1】:

您需要使用函数而不是字符串作为自动完成的源代码:

$('#Community').autocomplete(
    autoFocus: true,
    delay: 200,
    minLength: 2,
    select: function(event,ui) 
        $('#communityID').val(ui.item.value);
        $('#Community').val(ui.item.label);
        return false;
    ,
    change: function(event,ui) 
        alert("The value of the company ID field is: " + $('#companyID').val());
    ,
    source: function (request, response) 
        $.ajax(
            url: '/Community/ajax_getCommunities.cfm?companyID=' + $('#companyID').val(),
            data: request,
            success: response,
            error: function () 
                response([]);
            ,
            dataType: 'json'
        );
    
);

由于#companyId 的值正在更改,因此在初始化#Community 自动完成时选择它一次将不起作用。提供一个函数作为源使您可以在每次发出请求时重新查询 DOM 以获取公司 ID。

【讨论】:

这有帮助。将源代码放入此函数回调中就是将正确的值传递给自动完成 ajax 页面......但是自动完成仍然无法正常工作。 好的,什么不工作?您是否从服务器获得了您期望的响应?返回的数据是什么样的? 似乎响应恢复正常。我将自动完成更改为最少 1 个字符并按下“a”并从 ajax 调用收到以下响应:[value:22, label:Capitol Hill,value:23, label:Fairmont Oaks,value:21 , label:Lake Forest Apartments] 但是,似乎发生了 jQuery 错误。我无法使用 'in' 运算符在 ["value":22,"label":"Capitol Hill","value":23,"label":"Fairmont Oaks" 中搜索 '120' ,"value":21,"label":"Lake Forest Apartments"] 在 JS 控制台中。 我忘记在我的原始答案中包含dataType: 'json'。您可以尝试将其添加到 $.ajax 选项中吗? 知道了。完毕。并且完美运行!非常感谢您的帮助。

以上是关于jQuery .val() 不适用于 jQueryUI 自动完成功能的主要内容,如果未能解决你的问题,请参考以下文章

JQuery.Dirty 字段不适用于第一个“updateFormState”,但适用于第二个

jQuery 不适用于 Express

jQuery .click 不适用于 jQuery 生成的按钮 [重复]

jQuery延迟不适用于mouseout

jQuery 提交();不适用于火狐

Jquery $.Post 适用于 Firefox 但不适用于 Chrome