How to reduce the loading time of a function in ajax? - php

Question

This is my site. The idea is when you select a country from the dd, by on change events its calls a function using AJAX, execute a query and return a json. Im using Codeigniter framework. So my question how to improve this code in order to reduce the loading time of the cities, by selectin a country ? yes i know im a little stubborn and i dont want to use counties :)
here is html code in the view:
<div class="select_zones">
Country:
<select name="country" id = 'country' style="width:220px;">
<option value = "-1" selected="selected">Select a country</option>
<?php
foreach ($countries as $key => $value) {
echo '<option value = "'.$value->id.'-'.$value->country_type.'">'.trim($value->name).'</option>';
}
?>
</select>
</div>
<div class="select_zones">
<div class="city" style ="display:none;">
City:
<select name="city" id ="city" style="width:220px;">
</select>
</div>
</div>
this is the js code:
$("#country").select2();
$("#city").select2();
$("#country").change(function(){
$("#city option").remove();
value = $(this).val();
value = value.split("-");
$.post( "register/get_cities_from_dd", { country_type: value[1]})
.done(function( data ) {
obj = JSON.parse(data);
for(var i in obj) {
$('<option>', {
text : obj[i].name,
value : obj[i].id
}).prependTo('#city');
}
});
$(".city").show();
});
this is the function from the controller:
public function get_cities_from_dd(){
$country_type = $_POST['country_type'];
$cities = $this->register_model->get_cities($country_type);
echo json_encode($cities);
}
and finally the model:
public function get_cities($country_type){
return $this->db->query("SELECT id,name FROM cities WHERE city_type = '".$country_type."' ORDER BY `name` DESC ")->result();
}

Answer 1

You're loading way too much data, there is no way to improve this (other than changing it completely like suggested in the comments to your question). Also note that https://codereview.stackexchange.com/ would have been a better place for this question.
The best solution to your problem would be e.g. Elasticsearch or any equivalent software that was designed to auto-complete huge amounts of data. The user could simply start typing the name of the city and the software could complete it. I'd use a text field, wait for at least two characters and insert a e.g. 250ms timeout (request animation frame) between each key stroke before hitting the server again. But I'd still limit the number of results to e.g. 25 or 100 if you will.
If you still want to stick to your current implementation and don't want to listen to the many comments that were given to your question (like the serious SQL injection problem) go for prepared HTML files.
We have a directory countries that contains the options for each country, totally rendered, no need to do anything other than loading from the server:
/countries/at.html
/countries/us.html
Current HTML document:
<select id="country" name="country">
<option value="at">Austria</option>
<option value="us">United States</option>
</select>
<select id="cities" name="cities">
<option selected>Please Select a Country</option>
</select>
Our jQuery:
$("#country").change(function (event) {
$("#citites").load("/cities/" + this.value + ".html");
});
Still, way too much for the browser.