php + Bootstrap-v3-Typeahead 自动完成组件的使用

Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete，类似百度、谷歌等搜索提示；输入关键词出现相应的下拉列表数据。

是Bootstrap-3-Typeahead，不是Twitter open source的typeahead，两者用法有差异。外加如果配合原生的Bootstrap3 的话推荐还是用这个。（当然Twitter open source也有个bootstrap）。

1、基于Bootstrap v3 版本的 typeahead

　第一，简单使用：

　首先，最简单的使用方式，就是直接在标记中声明，通过 data-provide="typeahead"　来声明这是一个 typeahead 组件，通过 data-source= 来提供数据。当然了，你还必须提供 bootstrap-typeahead.js 脚本。

<html>

<head>

    <meta charset="utf-8"/>

    <link href="./bootstrap.min.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    <script src="//cdn.bootcss.com/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>

    <form id="searchform" class="navbar-form navbar-left" role="search" target="_blank" method="get" action="">

        <div class="form-group">

            <!--第一种方法-->

            <input id="product_search" type="text" data-provide="typeahead" data-source='["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]'>

        </div>

        <button type="submit" class="btn"  id="searchbtn">搜索</button>

    </form>

</body>

</html>

　　第二，支持 Ajax 获取数据

　　注意，我们提供了一个 source 函数来提供数据，这个函数接收两个参数，第一个参数 query 表示用户的输入，第二个参数是 process 函数，这个 process 函数是 typeahead 提供的，用来处理我们的数据。

　　如果你希望通过 Ajax 调用从服务器端获取匹配的数据，那么，在异步完成的处理函数中，你需要获取一个匹配的字符串数组，然后，将这个数组作为参数，调用 process 函数。

<html>

<head>

    <meta charset="utf-8"/>

    <link href="./bootstrap.min.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    <script src="//cdn.bootcss.com/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>

    <form id="searchform" class="navbar-form navbar-left" role="search" target="_blank" method="get" action="">

        <div class="form-group">

            <!--第一种方法-->

            <!--<input id="product_search" type="text" data-provide="typeahead" data-source='["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]'>-->

            <input type="text" id="product_search" name="keys" class="form-control"  data-provide="typeahead" data-value="" autocomplete="off" placeholder="请输入要搜索关键词">

        </div>

        <button type="submit" class="btn"  id="searchbtn">搜索</button>

    </form>

    <script>

        /***第二种方法****************************************/

        console.log("欢迎使用typeahead");

        /***第一种形式******返回json串***********************/

        $('#product_search').typeahead({

            source: function (query, process) {

                return $.ajax({

                    url: './server.php',

                    type: 'post',

                    data: { query: query },

                    dataType: 'json',

                    success: function (result) {

                        var resultList = result.map(function (item) {

                            var aItem = { id: item.id, name: item.name };

                            return JSON.stringify(aItem);

                        });

                        return process(resultList);

                    }

                });

            },

            matcher: function (obj) {

                var item = JSON.parse(obj);

                return ~item.name.toLowerCase().indexOf(this.query.toLowerCase())

            },

            sorter: function (items) {

               var beginswith = [], caseSensitive = [], caseInsensitive = [], item;

                while (aItem = items.shift()) {

                    var item = JSON.parse(aItem);

                    if (!item.name.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(JSON.stringify(item));

                    else if (~item.name.indexOf(this.query)) caseSensitive.push(JSON.stringify(item));

                    else caseInsensitive.push(JSON.stringify(item));

                }

                return beginswith.concat(caseSensitive, caseInsensitive)

            },

            highlighter: function (obj) {

                var item = JSON.parse(obj);

                var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')

                return item.name.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {

                    return '<strong style="font-size:16px;">' + match + '</strong>'

                })

            },

            updater: function (obj) {

                var item = JSON.parse(obj);

                $('#product_search').attr('data-value', item.id);

                return item.name;

            },

            delay:500,

            minLength:1,

            items: 10,   //显示10条

            delay: 0,  //延迟时间

        });

        /**第二种形式*****返回json串**********************************/

        jQuery('#product_search').typeahead({

            source: function (query, process) {

                //query是输入值

                jQuery.getJSON('./server.php', { "query": query }, function (data) {

                    process(data);

                });

            },

            highlighter: function (item) {

                var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')

                return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {

                    return '<strong style="font-size:16px;">' + match + '</strong>'

                })

            },

            updater: function (item) {

                return item

            },

            afterSelect: function (item) {

                //选择项之后的时间，item是当前选中的项

                $("#product_search").attr("data-value",item.id);

            },

            delay:500,

            minLength:1,

            items: 10,   //显示10条

            delay: 0,  //延迟时间

        });

    </script>

</body>

</html>

　　服务器处理文件 server.php

<?php

    //1、 先获取当前搜索词"query"

    //2、 从数据库中查询此字段的热词集合

    //3、 从数据库中检索出包含此搜索词的热词集合，并按搜索次数排序,将数据返回给typeahead.js

    if(!empty($_GET)){

        $data = array();

        $data[0]['id'] = 0;

        $data[0]['name'] = "aaaaa";

        $data[1]['id'] = 1;

        $data[1]['name'] = "aaaaabbbbbb";

        $data[2]['id'] = 2;

        $data[2]['name'] = "aaaaaabbbbbccccc";

    }else{

        $data = array();

        $data[0]['id'] = 0;

        $data[0]['name'] = "baidu";

        $data[1]['id'] = 1;

        $data[1]['name'] = "baidu2";

        $data[2]['id'] = 2;

        $data[2]['name'] = "baidu3";

    }

    echo json_encode($data);die;