jquery input 搜索自动补全、typeahead.js

最近做个一个功能需要用到自动补全，然后在网上找了很久，踩了各种的坑

最后用typeahead.js这个插件，经过自己的测试完美实现

使用方法：在页面中引入jquery、jquery.typeahead.min.js和jquery.typeahead.min.css文件。

<link href="../js/jquery.typeahead.min.css" rel="stylesheet" />
<script src="../js/jquery-1.10.1.min.js"></script>
<script src="../js/jquery.typeahead.min.js"></script>

html部分代码：

<table border="" cellpadding="" cellspacing="" >
            <tr>
                <th>
                    所属企业：
                </th>
                <td>
                    <div class="typeahead__container">
                        <div class="typeahead__field">
                            
                                <input class="js-typeahead"
                                    name="q"
                                    type="search"
                                    autofocus
                                    autocomplete="off" placeholder="输入企业名称查找企业" />
                            

                        </div>
                    </div>

                    <label id="yixuanze" runat="server"></label>
            
                </td>
            </tr><br /></table>

jquery方法：

$.typeahead({
            input: '.js-typeahead',
            minLength: 0,
            order: "asc",
            items: 10,
            dynamic: true,
            delay: 500,
            backdrop: {
                "background-color": "#fff"
            },
            template: function (query, item) {
                return '' +
                        '{{company_name}} ' +
                        '（{{person_name}}）<br/>' +
                        '{{company_address}} '
            },
            emptyTemplate: "没有找到与 ‘{{query}}’ 相关的数据",
            source: {
                user: {
                    display: "company_name",
                    data: function () {
                        var deferred = $.Deferred(),
                            query = this.query;
                        $.getJSON(
                           "../Interface/****.ashx",  //后台获取数据接口地址，这里我用的是ashx文件
                            {
                                dataType: "getcompany",
                                q: query
                            },
                            function (data) {
                                deferred.resolve(data)
                            }
                        )
                        return deferred;
                    }
                }
            },
            callback: {
                onClick: function (node, a, item, event) {
                    $("#yixuanze").html("已选择：" + item.company_name);
                   
                },
                onSendRequest: function (node, query) {
                    console.log('request is sent')
                },
                onReceiveRequest: function (node, query) {
                    console.log('request is received')
                }
            },
            debug: true
        });

运行效果：

下载：最新盘本请前往官网下载，网盘版本为2.10.4

官方下载地址：http://www.runningcoder.org/jquerytypeahead/demo/

百度网盘下载地址：https://pan.baidu.com/s/1-sFkU2d29qDesB2RIRgk2Q

插件截图