Bootstrap 预输入和 codeigniter答案

【问题标题】：Bootstrap typeahead and codeigniterBootstrap 预输入和 codeigniter
【发布时间】：2016-01-09 19:45:55
【问题描述】：

我同时使用 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 后得到这个结果，并显示如下图所示的搜索结果：

【问题讨论】：

不知道你认为的site_url+'typeahead/home/json_search_country'是从哪里来的？

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

【解决方案1】：

你问

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

感谢您迄今为止分享您的代码。但是我不明白你在做什么 - 抱歉。

首先，如果您的用户正在搜索，您可以从搜索表单开始。这个表单（在你想要的任何页面上）通过普通的 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

当您构建查询时，您可以使用“喜欢”字词来匹配您的搜索结果。例如，您可以这样做：

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

术语“两者”也可以是“之前”或“之后”。

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

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

我真诚地希望对您的网站有所帮助并祝您好运，

祝你好运，

保罗。

【讨论】：

好的，所以你想搜索两列，在查询生成器中使用 like 和 or_like。您不会收到重复的条目。然后，您可以使用文本助手突出显示搜索词或在输出上执行 substr 以将搜索词替换为格式化版本。这完全取决于你。