2

1 つのフォームに 2 つの jQueryUI Autocomplete があります。一方が他方を養います。私の目標は、最初のフィールドをオートコンプリートし、(意図した) 非表示フィールドに ID を入力することです。2 番目のオートコンプリートは、リモート ページへの Ajax 呼び出しを実行し、最初のオートコンプリートからの ID を渡します。

これはほとんど機能しています。最初のオートコンプリートは正常に機能し、companyID フィールドに適切な値が入力されます。

私の問題は、2 番目のオートコンプリートが常に値 0 を Ajax 要求ページに渡していることです。2 番目のオートコンプリートでソースへの呼び出しによって返された .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() が機能しない理由について誰か考えがありますか?

4

1 に答える 1

4

オートコンプリートのソースには、文字列の代わりに関数を使用する必要があります。

$('#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機能しません。関数をソースとして提供すると、リクエストが行われるたびに会社 ID の DOM を再クエリできます。

于 2013-07-17T20:05:18.837 に答える