Bootstarp3 Typeahead自动补全插件

前言

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

JS文件引用顺序

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>

简单使用

<!-- 通过data-provide="typeahead"来声明这是一个typeahead组件 -->
<!-- 通过data-source=来提供数据 -->
<input type="text" data-provide="typeahead" autocomplete="off" id="input">
<script type="text/javascript">
    $(document).ready(function() {
        var dataSource = ['军工', '高校', '煤化工', '新能源', '节能环保', 'AB股', 'AH股', 'HS300'];
        $("#input").typeahead({
            source: dataSource, // 数据源
        });
    });
</script>

个性化相关设置

<input type="text" data-provide="typeahead" autocomplete="off" id="input">
<script type="text/javascript">
    $(document).ready(function() {
        var dataSource = ['军工', '高校', '煤化工', '新能源', '节能环保', 'AB股', 'AH股', 'HS300'];
        $("#input").typeahead({
            source: dataSource, // 数据源
            items: 8,           //最多显示个数
            delay: 500,         //延迟时间
            //这里一定要return，否则选中不显示，外加调用display的时候null reference错误。
            updater: function (item) {    
                return item;    
            },
            //返回选中的字符串
            displayText: function (item) { 
                return item;    
            },
            //选择项之后的事件，item是当前选中的选项
            afterSelect: function (item) { 
                console.log(item);
            }
        });
    });
</script>

ajax动态获取数据

<input type="text" data-provide="typeahead" autocomplete="off" id="input">
<input type="hidden" id="hidden">
<script type="text/javascript">
    $(document).ready(function() {
        var objects = {};
        $("#input").typeahead({
            source: function(query, process) { //query是输入框输入的文本内容, process是一个回调函数
                $.post("${base}/demo/list", {name: query}, function(data) {
                    if (data == "" || data.trim().length == 0) { console.log("没有查询到相关结果"); };
                    var results = [];
                    for (var i = 0; i < data.length; i++) {
                        objects[data[i].name] = data[i].id;
                        results.push(data[i].name);
                    }
                    process(results);
                });
            },
            afterSelect: function (item) {       //选择项之后的事件，item是当前选中的选项
                $("#hidden").val(objects[item]); //为隐藏输入框赋值
            },
        });
    });
</script>

项目地址

typeahead for github