typeahead模糊搜尋查詢-結合bootstrap和jquery
阿新 • • 發佈：2019-01-31
本文利用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"> <inputtype="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; }