controller:test.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Test extends CI_Controller
{
function __construct()
{
parent :: __construct();
$this->load->helper(array('form', 'url', 'captcha', 'email'));
$this->load->model('Fetch_data');
}
public function index()
{
$this->load->view('index',$data);
}
public function lookup()
{
$keyword = $this->input->post('term');
$data['response'] = 'false';
$query = $this->Fetch_data->lookup($keyword);
if( ! empty($query) )
{
$data['response'] = 'true';
$data['message'] = array();
foreach( $query as $row )
{
$data['message'][] = array(
'college_name' => $row->college_name
);
}
}
if('IS_AJAX')
{
echo json_encode($data);
}
else
{
$this->load->view('index',$data);
}
}
}
view.php
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<style>
.ui-menu {
list-style:none;
padding: 2px;
margin: 0;
display:block;
}
.ui-menu .ui-menu {
margin-top: -3px;
}
.ui-menu .ui-menu-item {
margin:0;
padding: 0;
zoom: 1;
float: left;
clear: left;
width: 100%;
font-size:80%;
}
.ui-menu .ui-menu-item a {
text-decoration:none;
display:block;
padding:.2em .4em;
line-height:1.5;
zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
font-weight: normal;
margin: -1px;
}
</style>
<script type="text/javascript">
$(this).ready( function() {
$("#colleges").autocomplete({
minLength: 1,
source:
function(req, add){
$.ajax({
url: "<?php echo base_url(); ?>index.php/test/lookup",
dataType: 'json',
type: 'POST',
data: req,
success:
function(data){
if(data.response =="true"){
add(data.message);
console.log(data);
}
},
});
},
});
});
</script>
<input type="text" name="colleges" id="colleges" class="form-control" placeholder="Colleges and Universities" />
<ul>
<div class="well" id="result"></div>
</ul>
模型:
public function lookup($keyword)
{
$this->db->select('college_name,state,field')->from('all_colleges');
$this->db->like('college_name',$keyword,'after');
$this->db->or_like('state',$keyword,'after');
$query = $this->db->get();
$result = $query->result_array();
return $result;
}
在此代码中,我想创建自动填充建议框。现在,我正在创建具有函数名称查找的测试控制器,该查询在脚本中使用视图页面调用。在这里,当我在文本框中写出somthing时,它看起来像。
如何解决此问题?
答案 0 :(得分:1)
我不太确定。但是我注意到构建的数组有些不对劲。在控制器中试试这个,
if( ! empty($query) )
{
$data['response'] = 'true';
$data['message'] = array();
$data['auto_com'] = array();
foreach( $query as $row )
{
$data['message'][] = array(
'college_name' => $row->college_name
);
$data['auto_com'][] = $row->college_name;
}
}
if('IS_AJAX')
{
echo json_encode($data['auto_com']);
}
else
{
$this->load->view('index',$data);
}
在视图
中<script type="text/javascript">
$(this).ready( function() {
$("#colleges").autocomplete({
source: "<?php echo base_url(); ?>index.php/test/lookup"
});
});
</script>
答案 1 :(得分:0)
Ajax只需要返回数据,并且它不需要查看。你的if else函数是错误的,因为Ajax在你的索引方法中执行。如果你想通过ajax传递一个变量,你必须使用它来代替你的数据:
data: {
term: //some data
},
这使$this->input->post('term');
可用。你的功能还有一件事
function(req, add){
$.ajax({
url: "<?php echo base_url(); ?>index.php/test/lookup",
dataType: 'json',
type: 'POST',
data: req,
success:
function(data){
if(data.response =="true"){
add(data.message);
console.log(data);
}
},
});
},
你必须调用它来执行一个动作,你刚刚声明了它,但还没有调用它。