我希望我的capital_city自动填充字段仅显示与country_name相关的选项。因此,当在第二个选项字段中选择一个国家/地区时,仅显示与所选国家/地区相关的城市。谢谢。
这是我的观点.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();
}
答案 0 :(得分:0)
您需要在country_name自动填充功能中使用自动填充功能中的onselect选项。
在国家/地区列表中选择项目后,您将countryid传递到另一个功能,该功能将更新城市自动完成源以传递所选的国家/地区ID。 您可以在API中使用GET,将国家/地区ID传递给您的模型,并获取属于该国家/地区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);
}