php - jquery 链式自动完成

Question

我搜索了 jquery 链式自动完成功能，但没有得到任何明确的答案。
到目前为止，这是我从网络搜索中获得的当前 jquery 自动完成代码，
我还使用此脚本动态添加带有表单字段的行。
http://ecommercepros.org/blog/wievblog.php?id=1695 。

<script>
var startingSlide = $('#some_element').data('startingslide');
$(function(){

function Adicionar(){
    $("#mytable tbody").append(
        "<tr>"+
        "<td><input class='country' type='text' name='country[]'></td>"+
        "<td><input class='city' type='text' name='city[]'></td>"+
        "</tr>");

    $(".btnSalvar").bind("click", Salvar);      
    $(".btnExcluir").bind("click", Excluir);

    $(".countries").autocomplete("<?php echo site_url('country/get_country');?>",{ mustMatch:false })
        .result(function (evt, data, formatted) {

    });             
};

function Excluir(){
    var par = $(this).parent().parent(); //tr
    par.remove();
};

$(".btnEditar").bind("click", Editar);
$(".btnExcluir").bind("click", Excluir);
$("#btnAdicionar").bind("click", Adicionar);            

});
</script>  

它工作正常，但现在我想添加链式功能，当某个国家 选择后，CITY 的自动填充将基于 COUNTRY 的值。

请帮助我。

Answer 1

如果您使用jquery-ui autocomplete ，那么你可以引用这个

<强> JSFIDDLE DEMO用于根据第一个自动完成中选择的值动态更新其他自动完成值

JS代码:

$(document).ready(function () {
     var availableTags = [
"Java",
"JavaScript",
"PHP"
];
$( "#tags" ).autocomplete({
    source: availableTags,
    select: function( event, ui ) {
        $( "#version" ).val('');
        //alert(ui.item.value);
        var selected_val = ui.item.value;        
        if(selected_val == "Java")
        {
            $( "#version" ).autocomplete({
                source: ['Java 3.1' ,'Java 3.2']
            });
        } 
        else if(selected_val == "PHP")
        {
            $( "#version" ).autocomplete({
                source: ['PHP 5.3.1' ,'PHP 5.3.4']
            });
        } 
        else if(selected_val == "JavaScript")
        {
            $( "#version" ).autocomplete({
                source: ['JavaScript 1.0' ,'JavaScript 2.5']
            });
        } 
    }    
});
});

HTML 代码:

<h4>Jquery-ui autocomplete. The "version" values will be updated based on the selection of the selection of "programming language"</h4>
<div class="ui-widget">
<label for="tags">Select programming language: </label>
    <input id="tags"><small>Type like "j"</small>

<br>
<label for="tags">Select version: </label>
<input id="version">    
</div>