如何创建两个依赖下拉（自动完成）菜单？

Question

I want my capital_city autocomplete field to show only options that are related to country_name. So when choose a country in the second option field show only cities that are related to the selected country. Thank you.

Here is my view.php:

<div class="filtering">
 <form class="searchbox_1">
Country Name: <input type="text" class="search_1" name="country_name" id="country_name" />
City Name: <input type="text" class="search_1" name="capital_city" id="capital_city" />
Date from <input class="search_1" type="date" name="from_date" id="from_date"/>
Date to <input class="search_1" type="date" value = "<?php echo date('Y-m-d')?>"  name="to_date" id="to_date"/>
<center><button  class="submit_1" type="submit" id="LoadRecordsButton">Search</button>
    <input class ="submit_1" type="reset" value="Clear fields!"></center>

 </form>
 </div>
 <div id="countryTable"></div>
 <script type="text/javascript">

 $(document).ready(function () {

//Prepare jTable
$('#countryTable').jtable({
title: 'Country\'s',
        paging: true,
        pageSize: 10,
        sorting: true,
        defaultSorting: 'country_name ASC',
        selecting: true,
        multiselect: true,
        selectingCheckboxes: true,
        selectOnRowClick: true,
        actions: {
                listAction:   'get_country',
                createAction: 'create_country',
                updateAction: 'update_country',
                deleteAction: 'delete_country'
        },
        fields: {
            country_id: {
            key: true,
                list: false
            },
                country_name: {
                title: 'Country Name',
                width: '11%'
                },
                country_code: {
                title: 'Country Code',
                width: '11%'
                },
                surface_area: {
                title: 'Surface Area (m<sup>2</sup>)',
                width: '13%'
                },
                continent_name: {
                title: 'Continent Name'
                },
                continent: {
                title: 'Continent Code',
                width: '12%'
                },
                population: {
                title: 'Population'
                },
                capital_city: {
                title: 'Capital City'
                },
                record_date: {
                title: 'Record Date',
                        type: 'date',
                        displayFormat: 'mm/dd/yy',
                        create: false,
                        edit: false,
                        sorting: false
                }
        },


        $('#country_name').autocomplete({
            source: 'list_country',
            minLength: 0,
            scroll: true,
            autoFocus: true
        }).focus(function() {
        $(this).autocomplete("search", "")
                .autocomplete( "widget" )
                .addClass( "country_field" );
    });

     $('#capital_city').autocomplete({
        source: 'list_city',
        minLength: 0,
        scroll: true,
        autoFocus: true
    }).focus(function() {
        $(this).autocomplete("search", "")
                .autocomplete( "widget" )
                .addClass( "country_field" );
    });

$('#LoadRecordsButton').click(function (e) {
    e.preventDefault();
    $('#countryTable').jtable('load', {
        country_name: $('#country_name').val(),
        capital_city: $('#capital_city').val(),
        from_date: $('#from_date').val(),
        to_date: $('#to_date').val()
    });

});

$('#LoadRecordsButton').click();

 });

 </script>
 </div>

Here is my model.php:

 public function get_country_name() {

 $searchTerm = filter_input(INPUT_GET, 'term');

  $query = $this->db->query("SELECT DISTINCT country_name FROM country "
   . "WHERE deleted=0 AND country_name LIKE '" . $searchTerm . "%' ORDER BY    country_name ASC");

 $row = array();

foreach ($query->result_array() as $ro) {
$row[] = $ro['country_name'];
}
   echo json_encode($row);
}
 public function get_city_name() {

 $searchTerm = filter_input(INPUT_GET, 'term');

 $query = $this->db->query("SELECT DISTINCT capital_city FROM country "
 . "WHERE deleted=0 AND capital_city LIKE '" . $searchTerm . "%' ORDER BY     capital_city ASC");

$row = array();

foreach ($query->result_array() as $ro) {
$row[] = $ro['capital_city'];
}
echo json_encode($row);
}

Here is my controller.php:

public function list_country(){

$this->load->model('Country_model');
$this->Country_model->get_country_name();

}    

public function list_city(){

$this->load->model('Country_model');
$this->Country_model->get_city_name();

}

Answer 1

you need to use the onselect option in the autocomplete in the country_name autocomplete.

Upon selecting an item in the country list, you are passing the countryid in to another function which in turn will update the city autocomplete source to pass on the selected country id. You can use GET in your API, pass the country id to your model and get the cities that belong to that country id. Syntaxes might change a bit depending on your jquery version.

$('#country_name').autocomplete({
            source: 'list_country',
            minLength: 0,
            scroll: true,
            autoFocus: true
        }).focus(function() {
        $(this).autocomplete("search", "")
                .autocomplete( "widget" )
                .addClass( "country_field" );
    })select: function( event, ui ) {
        changecitysource(ui.item.country_id); // change the country id according to your source
    };

    function changecitysource(countryid){
        var newsourceurl = "http://newurl.org/getcities/countryid";
        $( "#capital_city" ).autocomplete('option', 'source', newsourceurl);
    }

Check this fiddle