我正在研究jquery自动完成功能,以在codeigniter中填充世界上的城市(世界上100k的城市)。我们的开发人员已经做过,但每个按键控制器都会调用城市的控填充自动完成功能需要花费太多时间才能显示。我将在下面显示代码
Jquery:
$("#venuecity_country").autocomplete("<?php echo base_url(); ?>venue/get_city_country/",{
//width: 480,
matchContains: true,
minChars: 1,
onItemSelect:selectItem
});
function findValue(li) {
console.log(li);
var sValue = li.value;
$('#event-search-results-content').ngsearch({location:true,locationValue:sValue});
}
function selectItem(li) {
findValue(li);
$("#city_country").val('');
}
Controller:
function get_city_country()
{
$query = $this->Venue_Model->get_city_county($this->session->userdata('venue_cntry'));
if(!empty($query))
{
foreach ($query as $row) {
echo $row['city'].','.$row['country_name']. "\n";
}
}
else
{
$get_country = $this->Venue_Model->getLocationInfoByIp($_SERVER['REMOTE_ADDR']);
$query = $this->Venue_Model->get_city_county($get_country);
if(!empty($query)) {
foreach ($query as $row) {
echo $row['city'].','.$row['country_name']. "\n";
}
}
}
}
Model:
function get_city_county($session_country)
{
$this->db->select('world_cities.country,world_cities.city,world_countries.country_name,world_countries.country_code');
$this->db->join('world_countries','world_countries.country_code = world_cities.country');
$this->db->where('world_countries.country_name',$session_country);
$this->db->or_where('world_countries.country_id',$session_country);
$this->db->or_where('world_countries.country_code',$session_country);
$query = $this->db->get('world_cities');
if(!empty($query))
{
return $query->result_array();
}
}
根据自动填充的用户输入获取所有城市的最快方法是什么?
答案 0 :(得分:1)
你可以在查询和前端使用限制使用无限滚动。所以与所有城市记录相比,它将花费更少的时间
你改变模特:
function get_city_county($session_country)
{
$this->db->select('world_cities.country,world_cities.city,world_countries.country_name,world_countries.country_code');
$this->db->join('world_countries','world_countries.country_code = world_cities.country');
$this->db->where('world_countries.country_name',$session_country);
$this->db->or_where('world_countries.country_id',$session_country);
$this->db->or_where('world_countries.country_code',$session_country);
$this->db->limit(10);
$query = $this->db->get('world_cities');
if(!empty($query))
{
return $query->result_array();
}
}
改变Jquery:
$("#venuecity_country").autocomplete("<?php echo base_url(); ?>venue/get_city_country/",{
//width: 480,
matchContains: true,
minChars: 1,
onItemSelect:selectItem,
open: function (event, ui) {
$('<li class=""><a href="#" id="see_more" class="ui-corner-all" tabindex="-1"><span class="label">See More Result</span></a></li>').appendTo('ul.ui-autocomplete');
}
});
function findValue(li) {
console.log(li);
var sValue = li.value;
$('#event-search-results-content').ngsearch({location:true,locationValue:sValue});
}
function selectItem(li) {
findValue(li);
$("#city_country").val('');
}
所以它将只返回前10条记录,查看更多记录链接。看到更多链接重定向到新页面,并在此页面加载所有记录。