typeahead模糊搜索查询-结合bootstrap和jquery

本文利用twitter开源组件typeahead来实现一个模糊匹配效果，包含了，动态搜索，迷糊匹配等功能。非常强大。项目地址
项目结合了bootstrap，搜素更加美观

• 项目下载下来，然后引入

  <script src="/assets/plugins/bootstrap/js/typeahead.bundle.min.js" type="text/javascript"></script>

  路径自己看着办，别照抄我的

• 使用

  • html

  <div class="input-group" id="scrollable-dropdown-menu">                            <input type="hidden"  name="sellerId" id="sellerId" value="">                            <input type="text" class="form-control typeahead"  id="sellerName" value="">                            <div class="input-group-btn">                                <button type="button" class="btn btn-default dropdown-toggle" id="findSeller">                                    <span class="caret"></span>                                </button>                                </ul>                            </div>                        </div>

  ​

  • js

  <script type="text/javascript">    var states="";    var engine=null;//模糊匹配渲染引擎     //页面加载完成之后执行    $(document).ready(function () {        engine = new Bloodhound({            initialize: false,  //是否初始化，暂不初始化            identify: function(obj) { return obj.id; }, //可以通过id进行辨识            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),//检索name字段{id:"1",name:"hello"}这种形式            queryTokenizer: Bloodhound.tokenizers.whitespace,//默认            local: states  //从本地加载        });        function nflTeamsWithDefaults(q, sync) {            if (q === '') {                //sync(engine.get('5000', '2', '102165','102166')); 通过id去拿                sync(engine.all());//直接拿全部            }            else {                engine.search(q, sync);//进行按照搜索            }        }        //为ID 为scrollable-dropdown-menu 的typeahead设置一些属性        $('#scrollable-dropdown-menu .typeahead').typeahead({            minLength: 0,  //最小长度为0的时候就启用搜索            highlight:true //是否高亮        }, {            display:"name", //展示的时候展示name字段，不然就展示json了            limit:200,      //限制展示多少条，这里我设置很大，是因为我要做一个可以滚动的            source: nflTeamsWithDefaults  //来源用上面的一个方法，也可以直接写成states        });        //根据当前的businessId来吧        var businessIdSelect=2;//这个是你想要拿取的数据，根据id来获取数据        getSeller(businessIdSelect);    });    //处理成功后的数据    function processSellerList(data) {        var sellerData=JSON.parse(JSON.stringify(data));        //这个才是返回的数据        states=$.map(sellerData.data, function (seller) {            var singleSeller = JSON.parse(JSON.stringify(seller));            return {id:singleSeller.Id,name:singleSeller.Name};        });        engine.clear(); //清空一下初始数据        engine.local = states; //设置一下local        engine.initialize(true); //初始化        //如果是第一次进来，设置个值        if (common.isNotEmpty(sellerIdSelect)) {            var sellerJsonO=engine.get(sellerIdSelect);            //$("#sellerName").val(sellerJsonO[0].name);            $('#scrollable-dropdown-menu .typeahead').typeahead('val', sellerJsonO[0].name);            $("#sellerId").val(sellerJsonO[0].id);            sellerIdSelect=null;//保证只会进入一次        }    };    //获取数据的方法    function getSeller(businessId){        //封装的一个ajax请求,自己封装一下吧，不可以直接使用，第二个参数是方法        myajax.getSeller(businessId,processSellerList);    }    //当businessId改变的时候，机构也要改变    $("#businessId").on("change",function(){        var checkValue=$("#businessId").val();        getSeller(checkValue);        //请求name和value        $('#scrollable-dropdown-menu .typeahead').typeahead('val', "");        $("#sellerId").val("");    });    //获取每次选中的值    $('#scrollable-dropdown-menu .typeahead').bind('typeahead:select', function(ev, suggestion) {        var jsonSuggession=JSON.parse(JSON.stringify(suggestion));        $("#sellerId").val(jsonSuggession.id);    });    //用按钮控制打开和关闭，纯粹自己给自己找事，囧    var open=1;    $("#findSeller").on("click", function () {        if (open>0){            $('#scrollable-dropdown-menu .typeahead').typeahead('open');        }else{            $('#scrollable-dropdown-menu .typeahead').typeahead('close');        }        open=-open;    });</script>

  • css

  上面的可以成功，但是样式非常丑非常丑，下面我给出样式，直接复制就可以用

  大家可以自由调整

  span.twitter-typeahead .tt-menu,span.twitter-typeahead .tt-dropdown-menu {    position: absolute;    top: 100%;    width:100%;    left: 0;    z-index: 1000;    display: none;    float: left;    min-width: 160px;    padding: 5px 0;    margin: 2px 0 0;    list-style: none;    font-size: 14px;    text-align: left;    background-color: #ffffff;    border: 1px solid #cccccc;    border: 1px solid rgba(0, 0, 0, 0.15);    border-radius: 4px;    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);    background-clip: padding-box;    max-height: 200px;  //这个地方有改动，变成一个滚动的    overflow-y: auto;   //这个地方有改动，变成一个滚动的}span.twitter-typeahead .tt-suggestion {    display: block;    padding: 3px 20px;    clear: both;    font-weight: normal;    line-height: 1.42857143;    color: #333333;    white-space: nowrap;}span.twitter-typeahead .tt-suggestion.tt-cursor,span.twitter-typeahead .tt-suggestion:hover,span.twitter-typeahead .tt-suggestion:focus {    color: #ffffff;    text-decoration: none;    outline: 0;    background-color: #337ab7;}.input-group.input-group-lg span.twitter-typeahead .form-control {    height: 46px;    padding: 10px 16px;    font-size: 18px;    line-height: 1.3333333;    border-radius: 6px;}.input-group.input-group-sm span.twitter-typeahead .form-control {    height: 30px;    padding: 5px 10px;    font-size: 12px;    line-height: 1.5;    border-radius: 3px;}span.twitter-typeahead {    width: 100%;}.input-group span.twitter-typeahead {    display: block !important;    height: 34px;}.input-group span.twitter-typeahead .tt-menu,.input-group span.twitter-typeahead .tt-dropdown-menu {    top: 32px !important;}.input-group span.twitter-typeahead:not(:first-child):not(:last-child) .form-control {    border-radius: 0;}.input-group span.twitter-typeahead:first-child .form-control {    border-top-left-radius: 4px;    border-bottom-left-radius: 4px;    border-top-right-radius: 0;    border-bottom-right-radius: 0;}.input-group span.twitter-typeahead:last-child .form-control {    border-top-left-radius: 0;    border-bottom-left-radius: 0;    border-top-right-radius: 4px;    border-bottom-right-radius: 4px;}.input-group.input-group-sm span.twitter-typeahead {    height: 30px;}.input-group.input-group-sm span.twitter-typeahead .tt-menu,.input-group.input-group-sm span.twitter-typeahead .tt-dropdown-menu {    top: 30px !important;}.input-group.input-group-lg span.twitter-typeahead {    height: 46px;}.input-group.input-group-lg span.twitter-typeahead .tt-menu,.input-group.input-group-lg span.twitter-typeahead .tt-dropdown-menu {    top: 46px !important;}.tt-query .tt-hint{    width: 396px;    height: 30px;    padding: 8px 12px;    font-size: 24px;    line-height: 30px;    border: 2px solid #ccc;    -webkit-border-radius: 8px;    -moz-border-radius: 8px;    border-radius: 8px;    outline: none;}.tt-hint{    color: #999;}

  ​

  ​