bootstrap typeahead实现模糊查询功能

一：下载并引用

<script type="text/javascript" src="assets/js/bootstrap-typeahead.js"></script>

二：html部分：

<div class="">
        <input id="demo1" type="text" class="" placeholder="Search cities..." autocomplete="off" />
    </div>

三：js部分：

function displayResult(item, val, text) {
    console.log(item);
    $('.alert').show().html('You selected <strong>' + val + '</strong>: <strong>' + text + '</strong>');
}

//上面这个是获取被选中的值并赋给class为.alert的元素来显示

$('#demo1').typeahead({
        source: [
    { id: 1, name: '你好' },
    { id: 2, name: '你好2' },
    { id: 3, name: '中国' },
    { id: 4, name: 'Buffalo' },
    { id: 5, name: 'Boston' },
    { id: 6, name: 'Columbus' },
    { id: 7, name: 'Dallas' },
    { id: 8, name: 'Vancouver' },
    { id: 9, name: 'Seattle' },
    { id: 10, name: 'Los Angeles' }
    ], 

        items: 5,                          //规定查询时要显示的条目的最大值。数据类型是 number，默认值是 8

        display: 'Name',                //可以不写默认就是name
        val: 'ID',                             //可以不写默认就是name
        itemSelected: displayResult            //此处的意思是调用displayResult这个方法
    });

//上面的方法是前端直接写死option内容，还有一种就是通过ajax异步加载的方式

$('#demo1').typeahead({
        ajax: { url: '/cities/list', triggerLength: 1 }, 

        //省略ajax具体步骤
        itemSelected: displayResult
    });

上面的方式就是通过异步加载

备注：triggerLength用来规顶输入多少个字符就能开始模糊查询，默认为3可以自己定义

source: function (query, process) {
        var parameter = {query: query};
        $.post('@Url.Action("AjaxService")', parameter, function (data) {
            process(data);
        });
    }