ytse_jam ytse_jam - 1 year ago 109
jQuery Question

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.

var startingSlide = $('#some_element').data('startingslide');

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

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

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


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.

Answer Source

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 = [
$( "#tags" ).autocomplete({
    source: availableTags,
    select: function( event, ui ) {
        $( "#version" ).val('');
        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>

<label for="tags">Select version: </label>
<input id="version">    
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download