AutoSuggest field2基于field1选择

时间:2012-10-17 17:53:33

标签: javascript jquery jquery-ui autocomplete

对我来说,JS仍然有点不自然。我可以读它好吧,但是写它是我很少有机会做的事。

我有这个表格(简化)

<form>
    <div class="form_element">
        <label for="co">Cust Company:</label>    
        <input type="text" name="co" value="" id="co" />
    </div>
    <div class="form_element">
        <label for="contact">Cust Name:</label>
        <input type="text" name="contact" value="" id="contact" />
    </div>
</form>

我的自动完成功能正好适用于#co输入,但我可以使用一些指导来完成下一步的工作。
我需要根据#contact选项为#co输入自动建议名称。

我的JS目前看起来像这样

<script type="text/javascript">
    $('input#co').autocomplete({
        minLength: 2,
        source: function( request, response1 ) {
            url_1 = 'company/get_names/'+ request.term +'/name/json'
            $.getJSON(url_1, function(companies) {
                response1(companies);
            });
        },
        select: function(event, company){
            $('input#co' ).val( company.item.value );

            //alert(company.item.id);   // For testing
            url_2 = 'contact/persons_list/'+ company.item.id +'/json'

            $('input#contact').autocomplete({
                source: function( request, response2 ) {
                    $.getJSON(url_2, function(people) {  
                        response2(people);
                    });
                }
            })
        }    
    });
</script>

如果为#contact输入选择了值/建议后,如何获取显示#co输入的人/联系人的建议列表?

1 个答案:

答案 0 :(得分:0)

嗯......我最终选择了一种完全不同的方法,而且我认为 比我的第一线思路更好。

<script type="text/javascript">      

    var co_id;

    $('input#co').autocomplete({
        minLength: 2,
        source: function( request, response ) {
            url = 'company/get_names/'+ request.term +'/name/json',
            $.getJSON(url, function(companies) {
                response(companies);
            });
        },
        select: function(event, company){
            $('input#co' ).val( company.item.value );
            co_id = company.item.id;
        }
    });

    $('input#contact').autocomplete({
        //minLength: 2,
        source: function( request, response ) {
            url = 'contact/persons_list/'+co_id+'/json',
            $.getJSON(url, function(companies) {
                response(companies);
            });
        }
    });

</script>

效果很好!