【经验分享】快速使用typeahead

# 效果图

实现功能： 在 input 输入框输入字符串时，通过 typeahead 异步请求服务器接口，返回 json 数据，呈现类始于下拉框的样子，选择后自动补全相关输入框，提升用户体验。

# 准备

jquery.js (opens new window)
handlebars.js (opens new window) - 用于结果（下拉框）显示样式
typeahead.bundle.js (opens new window)

# 开始

# 导入 js 库

在需要用到 typeahead 的 html 页面，依次导入 jquery.js、handlebars.js、typeahead.js，顺序错误会导致无法调用 jQuery

<!-- 最好把bootstrap也一同加上 -->
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"> 
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/handlebars.js/4.1.2/handlebars.js"></script>
<script src="https://cdn.bootcss.com/typeahead.js/0.11.1/typeahead.bundle.js"></script>

# HTML

    <input type="text" id="typeahead_get" class="form-control">
    <input type="text" id="typeahead_post" class="form-control">

HTML 部分不需要过多的操作，只要添加一个 input:text 元素即可，并给它一个 id 或者 class，这里我给它一个 typeahead 的 class，也可以是其他，并不限制。

# CSS

typeahead 默认样式是一个透明背景的，甚至让你有种是不是哪里出错了的错觉

<style>
    /*typeahead显示样式*/
    #custom-templates .empty-message {
        padding: 5px 10px;
        text-align: center;
    }

    .tt-query {
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    }

    .tt-hint {
        color: #999
    }

    .tt-menu { /* used to be tt-dropdown-menu in older versions */
        width: 100%;
        margin-top: 4px;
        padding: 4px 0;
        background-color: #fff;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, 0.2);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    }

    .tt-suggestion {
        padding: 3px 20px;
        line-height: 24px;
    }

    .tt-suggestion.tt-cursor, .tt-suggestion:hover {
        color: #fff;
        background-color: #0097cf;
    }

    .tt-suggestion p {
        margin: 0;
    }

    .twitter-typeahead {
        width: 100%;
    }
</style>

# JavaScript（重点）

服务器响应的 JSON 数组

[
    {"name":1,"title":"辣条"},
    {"name":2,"title":"涪陵榨菜"},
    {"name":3,"title":"茶叶蛋"},
    {"name":4,"title":"橙汁"},
    {"name":5,"title":"来自Post请求响应，你输入的值为s"}
]

    // Get请求
    var get_food = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: "food?f=%QUERY",
            wildcard: '%QUERY'
        }
    });

    //Post 请求
    var post_food = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,

        remote: {
            url: "food#%QUERY",
            wildcard: '%QUERY',
            transport: function (opts, onSuccess, onError) {
                var url = opts.url.split("#")[0];
                var query = opts.url.split("#")[1];
                $.ajax({
                    url: url,
                    data: {f:query},
                    type: "POST",
                    success: onSuccess,
                    error: onError,
                });
            }
        }
    });


    //Get触发方法
    $('#typeahead_get').typeahead({
            hint: false,
            highlight: true,
            minLength: 1
        }
        , {
            name: 'get_food',
            display: 'title',
            source: get_food,
            templates: {
                suggestion: Handlebars.compile('<div><strong>{{name}}</strong> – {{title}}</div>')
            },
        });


    //Post触发方法
    $('#typeahead_post').typeahead({
            hint: false,
            highlight: true,
            minLength: 1
        }
        , {
            name: 'post_food',
            display: 'title',
            source: post_food,
            templates: {
                suggestion: Handlebars.compile('<div><strong>{{name}}</strong> – {{title}}</div>')
            },
        });