Bootstrap typeahead 和 codeigniter
Bootstrap typeahead and codeigniter
我同时使用 bootstrap typeahead 和 codeigniter，我想获取数据库中两列的数据，我想在两列中搜索，但不显示重复的搜索结果。我该怎么办？
这是我的数据库：
我的代码，
控制器：
class Home extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('typeahead/country_model');
}
public function index()
{
$this->load->view('typeahead/index');
}
public function json_search_country()
{
$query = $this->country_model->get();
$data = array();
foreach ($query as $key => $value)
{
$data[] = array('id' => $value->id,
'province' => $value->province,
'city' => $value->province.', '.$value->city
);
}
echo json_encode($data);
}
}
型号：
class Country_model extends CI_Model {
function get()
{
$query = $this->db->get('countries');
return $query->result();
}
}
查看：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Twitter typeahead.js Use In CodeIgniter By Baqir Memon</title>
<!-- Bootstrap CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery -->
</head>
<style>
</style>
<body>
<div class="jumbotron">
<div class="container">
<h1>Baqir Memon (BM Concepts)</h1>
<p>Twitter typeahead.js Use In CodeIgniter</p>
<p>
<a class="btn btn-info" href="https://twitter.github.io/typeahead.js/" target="_blank">typeahead.js</a>
<a class="btn btn-primary" href="https://github.com/baqirmemon">Learn more</a>
</p>
</div>
</div>
<div class="container">
<div class="col-md-offset-4 col-md-4">
<form action="" method="POST" role="form">
<legend>Twitter typeahead.js</legend>
<div class="form-group">
<input type="hidden" class="form-control" name="country_id" id="country_id">
<input type="text" class="form-control" name="country_name" id="country_name" placeholder="Countries" autocomplete="off">
</div>
</form>
</div>
</div>
<!--https://github.com/twitter/typeahead.js/issues/1010-->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="<?php echo site_url(); ?>assets/Bootstrap-3-Typeahead-master/bootstrap3-typeahead.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(e){
var site_url = "<?php echo site_url(); ?>";
var input = $("input[name=country_name]");
$.get(site_url+'typeahead/home/json_search_country', function(data){
input.typeahead({
source: data,
minLength: 1,
});
}, 'json');
input.change(function(){
var current = input.typeahead("getActive");
$('#country_id').val(current.id);
});
});
</script>
</body>
</html>
这是 JSON 结果：
[{"id":"1","province":"Aruba","city":"Aruba, ABW"},{"id":"2","province":"Afghanistan","city":"Afghanistan, AFG"},{"id":"3","province":"Angola","city":"Angola, ARU"},{"id":"4","province":"Anguilla","city":"Anguilla, AIA"},{"id":"5","province":"Albania","city":"Albania, ALB"},{"id":"6","province":"Andorra","city":"Andorra, AND"},{"id":"7","province":"Netherlands Antilles","city":"Netherlands Antilles, ANT"},{"id":"8","province":"United Arab Emirates","city":"United Arab Emirates, ARE"},{"id":"9","province":"Argentina","city":"Argentina, ARG"},{"id":"10","province":"Armenia","city":"Armenia, ARM"},{"id":"11","province":"American Samoa","city":"American Samoa, ASM"},{"id":"12","province":"Antarctica","city":"Antarctica, ATA"},{"id":"13","province":"French Southern territories","city":"French Southern territories, ATF"},{"id":"14","province":"Antigua and Barbuda","city":"Antigua and Barbuda, ATG"},{"id":"15","province":"Australia","city":"Australia, AUS"},{"id":"16","province":"Austria","city":"Austria, AUT"},{"id":"17","province":"Azerbaijan","city":"Azerbaijan, AZE"},{"id":"18","province":"Burundi","city":"Burundi, BDI"},{"id":"19","province":"Belgium","city":"Belgium, BEL"},{"id":"20","province":"Benin","city":"Benin, BEN"},{"id":"21","province":"Burkina Faso","city":"Burkina Faso, BFA"}]
例如，我希望在从数据库中的两个列（province 和 city）搜索 aru 后得到这个结果，并显示搜索结果如下图：
你问了
i want get data of two column in database and i want to search in both columns but does not display the duplicate search results.
感谢您到目前为止分享您的代码。但是我不明白你在做什么 - 抱歉。
首先，如果您的用户正在搜索，您可以从搜索表单开始。这个表单（在你想要的任何页面上）通过正常的 CI 方法调用控制器：
<?php echo form_open('mycontroller/mymethod'); ?>
然后在那个控制器中收集 post 数据（加上任何你想做的错误检查）。
http://www.codeigniter.com/userguide3/libraries/input.html
现在您有了搜索词。处理搜索词的控制器将加载您的搜索结果视图页面。您可以使用 CI 查询生成器来查询数据库，该数据库将 return 您的结果放在一个数组中，您可以将其显示在您的视图页面上。
http://www.codeigniter.com/userguide3/database/query_builder.html
构建查询时，您可以使用 'like' 字词来匹配搜索结果。例如你可以这样做：
$this->db->select('*');
$this->db->like('province', $search_term, 'both');
$this->db->or_like('city', $search_term, 'both');
$this->db->get('mytable');
术语 'both' 也可以是 'before' 或 'after'。
然后您可以加载 CI 文本助手以在您的视图中突出显示搜索词组。
http://www.codeigniter.com/userguide3/helpers/text_helper.html#highlight_phrase
我真诚地希望对您的网站有所帮助并祝您好运，
祝福，
保罗.
我同时使用 bootstrap typeahead 和 codeigniter，我想获取数据库中两列的数据，我想在两列中搜索，但不显示重复的搜索结果。我该怎么办？
这是我的数据库：
我的代码，
控制器：
class Home extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('typeahead/country_model');
}
public function index()
{
$this->load->view('typeahead/index');
}
public function json_search_country()
{
$query = $this->country_model->get();
$data = array();
foreach ($query as $key => $value)
{
$data[] = array('id' => $value->id,
'province' => $value->province,
'city' => $value->province.', '.$value->city
);
}
echo json_encode($data);
}
}
型号：
class Country_model extends CI_Model {
function get()
{
$query = $this->db->get('countries');
return $query->result();
}
}
查看：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Twitter typeahead.js Use In CodeIgniter By Baqir Memon</title>
<!-- Bootstrap CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery -->
</head>
<style>
</style>
<body>
<div class="jumbotron">
<div class="container">
<h1>Baqir Memon (BM Concepts)</h1>
<p>Twitter typeahead.js Use In CodeIgniter</p>
<p>
<a class="btn btn-info" href="https://twitter.github.io/typeahead.js/" target="_blank">typeahead.js</a>
<a class="btn btn-primary" href="https://github.com/baqirmemon">Learn more</a>
</p>
</div>
</div>
<div class="container">
<div class="col-md-offset-4 col-md-4">
<form action="" method="POST" role="form">
<legend>Twitter typeahead.js</legend>
<div class="form-group">
<input type="hidden" class="form-control" name="country_id" id="country_id">
<input type="text" class="form-control" name="country_name" id="country_name" placeholder="Countries" autocomplete="off">
</div>
</form>
</div>
</div>
<!--https://github.com/twitter/typeahead.js/issues/1010-->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="<?php echo site_url(); ?>assets/Bootstrap-3-Typeahead-master/bootstrap3-typeahead.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(e){
var site_url = "<?php echo site_url(); ?>";
var input = $("input[name=country_name]");
$.get(site_url+'typeahead/home/json_search_country', function(data){
input.typeahead({
source: data,
minLength: 1,
});
}, 'json');
input.change(function(){
var current = input.typeahead("getActive");
$('#country_id').val(current.id);
});
});
</script>
</body>
</html>
这是 JSON 结果：
[{"id":"1","province":"Aruba","city":"Aruba, ABW"},{"id":"2","province":"Afghanistan","city":"Afghanistan, AFG"},{"id":"3","province":"Angola","city":"Angola, ARU"},{"id":"4","province":"Anguilla","city":"Anguilla, AIA"},{"id":"5","province":"Albania","city":"Albania, ALB"},{"id":"6","province":"Andorra","city":"Andorra, AND"},{"id":"7","province":"Netherlands Antilles","city":"Netherlands Antilles, ANT"},{"id":"8","province":"United Arab Emirates","city":"United Arab Emirates, ARE"},{"id":"9","province":"Argentina","city":"Argentina, ARG"},{"id":"10","province":"Armenia","city":"Armenia, ARM"},{"id":"11","province":"American Samoa","city":"American Samoa, ASM"},{"id":"12","province":"Antarctica","city":"Antarctica, ATA"},{"id":"13","province":"French Southern territories","city":"French Southern territories, ATF"},{"id":"14","province":"Antigua and Barbuda","city":"Antigua and Barbuda, ATG"},{"id":"15","province":"Australia","city":"Australia, AUS"},{"id":"16","province":"Austria","city":"Austria, AUT"},{"id":"17","province":"Azerbaijan","city":"Azerbaijan, AZE"},{"id":"18","province":"Burundi","city":"Burundi, BDI"},{"id":"19","province":"Belgium","city":"Belgium, BEL"},{"id":"20","province":"Benin","city":"Benin, BEN"},{"id":"21","province":"Burkina Faso","city":"Burkina Faso, BFA"}]
例如，我希望在从数据库中的两个列（province 和 city）搜索 aru 后得到这个结果，并显示搜索结果如下图：
你问了
i want get data of two column in database and i want to search in both columns but does not display the duplicate search results.
感谢您到目前为止分享您的代码。但是我不明白你在做什么 - 抱歉。
首先，如果您的用户正在搜索，您可以从搜索表单开始。这个表单（在你想要的任何页面上）通过正常的 CI 方法调用控制器：
<?php echo form_open('mycontroller/mymethod'); ?>
然后在那个控制器中收集 post 数据（加上任何你想做的错误检查）。
http://www.codeigniter.com/userguide3/libraries/input.html
现在您有了搜索词。处理搜索词的控制器将加载您的搜索结果视图页面。您可以使用 CI 查询生成器来查询数据库，该数据库将 return 您的结果放在一个数组中，您可以将其显示在您的视图页面上。
http://www.codeigniter.com/userguide3/database/query_builder.html
构建查询时，您可以使用 'like' 字词来匹配搜索结果。例如你可以这样做：
$this->db->select('*');
$this->db->like('province', $search_term, 'both');
$this->db->or_like('city', $search_term, 'both');
$this->db->get('mytable');
术语 'both' 也可以是 'before' 或 'after'。
然后您可以加载 CI 文本助手以在您的视图中突出显示搜索词组。
http://www.codeigniter.com/userguide3/helpers/text_helper.html#highlight_phrase
我真诚地希望对您的网站有所帮助并祝您好运，
祝福，
保罗.