如何創建兩個依賴下拉菜單（自動完成）？

Question

我希望我的capital_city自動完成場，只顯示那些對COUNTRY_NAME相關的選項。因此，在第二個選項字段中選擇國家時，只會顯示與所選國家/地區相關的城市。謝謝。

這裏是我的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> 

這裏是我的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); 
} 

這裏是我的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

你需要使用country_name自動完成中的自動完成中的onselect選項。

一旦在國家列表中選擇一個項目，你正在過countryid在另一個函數這反過來將更新城市自動完成源通過選定的國家ID。 您可以在API中使用GET，全國ID傳遞給你的模型，並得到屬於該國標識的城市。 語法可能會有所不同，具體取決於您的jQuery版本。

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