TYPEAHEAD helloworld

最新推荐文章于 2020-08-02 11:01:15 发布

ISaiSai

最新推荐文章于 2020-08-02 11:01:15 发布

阅读量583

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/ISaiSai/article/details/51173104

版权

javascript 专栏收录该内容

155 篇文章 0 订阅

订阅专栏

参考文档：http://twitter.github.io/typeahead.js/
typeahead 是一个jquery 的 autosuggest 插件

（另外一个各方面都非常相似的叫做jquerytypeahead，不知道是哪个抄袭哪个参考文档：https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md）

下面是一个最简单的代码

第一个参数Object是基本配置：

minLength 是输入多少个字符开始提示（默认输入一个就出提示）
hint 是否提示（会将第一个符合条件的文字放到input 中）
highlight 是否高亮显示匹配的文字

第二个参数Object是数据配置：

limit：最多显示的数量
source：可以是个函数，第一个参数是当前查询的文字，第二个参数是同步的回调函数（第三个参数是异步的回调函数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.min.js"></script>
    <script src="typeahead.js"></script>
</head>
<body>
<div class="container">
    <input id="abc"/>
</div>
<script>
    $(function () {
        $('#abc').typeahead({
                    hint: true,
                    highlight: true,
                    minLength: 1
                },
                {
                    limit: 5,
                     source: function (query, process) {
                        process(["a", "b", "c"])
                    }
                });
    })
</script>
</body>
</html>