CODEWITHSUNDEEP
phpjqueryautocompletejquery-ui-autocomplete
ytse_jam
ytse_jam

Reputation: 185

jquery Chained Autocomplete

I have searched for a jquery chained autocomplete, but i did not get any clear answer.
so far this is my current jquery autocomplete code that i get from web searching,
this script i use also to dynamically add row with the form fields.
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>

Its working ok, but now i want to add CHAINED Functionality, when a certain COUNTRY is selected, the autocomplete for CITY will based on the value of the COUNTRY.

Please HELP Me guys.

Upvotes: 2

Views: 1323

Answers (2)

sayed muzammil
sayed muzammil

Reputation: 17

Well i got the solution instead of using if and if else (loops)its better to follow up with inheritance/parent-child method in your JS

Upvotes: 0

Rahul Gupta
Rahul Gupta

Reputation: 10161

If you are using jquery-ui autocomplete, then you can refer this

JSFIDDLE DEMO for dynamically updating the autocomplete values of other based on the values selected on the first autocompelete

JS code:

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

Upvotes: 2

Related Questions