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>

它的工作正常，但现在我想在某个COUNTRY时添加CHAINED功能如果选中，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 code：

<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>

Answer 2

好了，我得到了解决方案，而不是使用if和if else（循环）更好地跟进JS中的继承/父子方法

Answer 3

我正在使用相同类型的代码，但是一旦我给出，我就无法加载我的整个表单。我的第三个领域的嵌套循环概念，即国家，州，城市。

$(document).ready(function () {
    var availableTags = [
        "India",
        "United States",
        "Qatar"
    ];
    $( "#tags" ).autocomplete({
        source: availableTags,
        select: function( event, ui ) {
            $( "#version" ).val('');
            //alert(ui.item.value);
            var selected_val = ui.item.value;        
            if(selected_val == "India")
            {
                $( "#version" ).autocomplete({
                    source: ['Tamil Nadu' ,'Karnataka'];
                    });
                    var select_vsl: function( event, ui ){
                    if(select_val=="Tamil Nadu")
                    {
                    $("#dist").autocomplete({
                    source:['ariyallur','kanchipuram','chennai']
                    });
                    }
                    else if(select_val=="Karnataka")
                    {
                    $dist("#dist").autocomplete({
                    source:['dakshina','uttara','bangalore']
                    })
                    }

                });
            } 
            else if(selected_val == "United States")
            {
                $( "#version" ).autocomplete({
                    source: ['Colorado' ,'Florida']
                });
            } 
            else if(selected_val == "Qatar")
            {
                $( "#version" ).autocomplete({
                    source: ['Doha' ,'Doha Corniche']
                });
            } 
        }    
    });

});

`

jquery链式自动完成

3 个答案: