Bootstrap typeahead和codeigniter

时间:2016-01-09 19:45:55

标签: javascript jquery twitter-bootstrap codeigniter typeahead.js

我使用bootstrap typeahead和codeigniter两个,我想在数据库中获取两列数据,我想在两列中搜索,但不显示重复的搜索结果。我该怎么办?

这是我的数据库:

enter image description here

我的代码,

控制器:

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"}]

例如,我希望在数据库中的两列(aruprovince)中搜索city之后获得此结果,并将搜索结果显示为以下图像:

enter image description here

1 个答案:

答案 0 :(得分:0)

你问了

  

我想在数据库中获取两列数据,我想在两列中搜索但不显示重复的搜索结果。

感谢您分享您的代码到目前为止。但是我不知道你在做什么 - 对不起。

首先,如果您的用户正在搜索,您将从搜索表单开始。此表单(在您想要的任何页面上)通过常规CI方法调用控制器:

<?php echo form_open('mycontroller/mymethod'); ?>

然后在该控制器中收集发布数据(以及您想要执行的任何错误检查)。

http://www.codeigniter.com/userguide3/libraries/input.html

现在你有了搜索词。处理搜索字词的控制器将加载搜索结果视图页面。您可以使用CI查询构建器查询数据库,该数据库将以数组形式返回结果,您可以在视图页面上显示该数据。

http://www.codeigniter.com/userguide3/database/query_builder.html

在构建查询时,您可以使用&#39; like&#39;与您的搜索结果相匹配的字词。例如,您可以这样做:

$this->db->select('*');    
$this->db->like('province', $search_term, 'both');
$this->db->or_like('city', $search_term, 'both');
$this->db->get('mytable');

这两个词都是&#39;也可以在&#39;之前或者&#39;在&#39;之后。

然后,您可以加载CI文本助手以突出显示视图中的搜索短语。

http://www.codeigniter.com/userguide3/helpers/text_helper.html#highlight_phrase

我真的希望能为您的网站带来帮助和好运,

祝福,

保罗。