<!-- 最外層div 可以任意指定 主要用于定義子元素寬度 --><div class="col-xs-10" style="width:800px"><!-- 表單label 添加文字提示 --><label for="" class="label-control">全文檢索</label><!-- 多選承接div 以后會動態(tài)添加span --><div class="hint-input-span-container"><!-- 表單元素 用來綁定監(jiān)聽事件以及接收用戶輸入 該層上方會動態(tài)添加span --><input type="text" name="hint-search" value="" placeholder="選定關(guān)鍵字或按下tab或按下enter來分割關(guān)鍵字"></div><!-- 包含下拉列表列 --><div class="hint-block"><!-- 根據(jù)json數(shù)據(jù)包動態(tài)添加li --><ul class="hint-ul"></ul></div></div>

* {box-sizing: border-box;}.hint-input-span-container {width:100%;background-color: #fff;border: 1px solid #ccc;box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);display: inline-block;padding: 2px 4px;color: #555;vertical-align: middle;border-radius: 1px;max-width: 100%;line-height: 30px;}.hint-input-span-container .tag {padding: -2px;font-size: 12px;font-family: serif;;margin-right: 2px;margin-top: 2px;margin-bottom: 2px;display: inline-block;}.label {font-size: 10px;padding: 4px 6px;border: none;text-shadow: none;border-radius: 3px;font-weight: 200;}.label-primary {background: #2693FF;color: white;}.hint-input-span-container span i[data-role='remove'] {cursor: pointer;}.tag {margin-right: 2px;color: white;}.tag [data-role="remove"] {margin-left: 2px;cursor: pointer;}input[name='hint-search'] {border: none;box-shadow: none;outline: none;background-color: transparent;padding: 0;margin: 0;width: 100%;max-width: inherit;}.hint-block {position: absolute;width: 100px;max-height: 120px;background-color: #fff;overflow: auto;display: none;z-index: 9999;}.hint-ul {text-decoration: none;list-style-type: none;padding-left: 5px;}.hint-ul li{font-size: 14px;padding: 2px 4px;}.hint-ul li:hover{background-color: #eee;}

$(function(){//json數(shù)據(jù)包var data = {data:["123","北京你好","北京歡迎您","北京好","海洋","海洋廣利局","我海洋","我吃驚","我啦啦啦啦","我不能忍","機構(gòu)","日本","俄羅斯的山","埃塞俄比亞","伊巴卡","比比比"]};//獲取后面需要多次調(diào)用的dom對象var $hintSearch = $("input[name='hint-search']");var $hintSearchContainer = $(".hint-input-span-container");var $hintBlock = $(".hint-block");var $hintUl = $(".hint-ul");//初次調(diào)用添加詞典addDictionary(data.data,addUlListener);//設(shè)置詞典列表寬度setHintSearchContainerWidth();//實現(xiàn)響應(yīng)式 監(jiān)聽resize事件$(window).bind('resize', setHintSearchContainerWidth);//獲得焦點$hintSearch.focus(function(){animteDown();});//失去焦點//設(shè)置延遲為了可以監(jiān)聽到click的響應(yīng)$hintSearch.blur(function(){setTimeout(function(){animateUp();},200);});//TAB 與 enter事件//監(jiān)聽tab與enter兩個鍵位 如果input內(nèi)有輸入的內(nèi)容，則添加span//注意最后要阻止一下事件冒泡 防止跳轉(zhuǎn)與切換焦點$hintSearch.keydown(function(e){switch (e.which) {case 9: case 13:{var text = $hintSearch.val();if(!$.trim(text)) {$hintSearch.val("");e.preventDefault();return;}if( !checkContainerHas(text) ) {$hintSearch.before('<span class="tag label label-primary">'+ text +' <i class="fa fa-times" data-role="remove"></i><i> </i></span>');addSpanListenr();}//console.log($hintSearch.val());$hintSearch.val("");$hintSearch.focus();e.preventDefault();break;}default: ;}});//檢測輸入配對//對輸入內(nèi)容在li中進行匹配 如果包含字符串可以找到并返回//搜索方法可以自行修改，只要保證返回一個搜索后的數(shù)組即可$hintSearch.keyup(function(e){var text = $hintSearch.val();if (!$.trim(text)){updateDictionary(data.data,addUlListener);}var tmparr = data.data.filter(function(x){return x.indexOf(text) != -1;})if (tmparr.length === 0) {tmparr.push("無匹配條目");}updateDictionary(tmparr,addUlListener);})//函數(shù)庫//添加用戶常用字典庫function addDictionary(dataarr, callback) {for(var i = 0; i < dataarr.length; i++) {$hintUl.append('<li>'+ dataarr[i] +'</li>');}callback();}//更新搜索內(nèi)容function updateDictionary(dataarr,callback) {$hintUl.empty();addDictionary(dataarr,callback);}//向下滑動動畫//封裝改變樣式邊框function animteDown(){$hintBlock.slideDown('fast').css({'border':'1px solid #96C8DA','border-top' : '0px', 'box-shadow' : '0 2px 3px 0 rgba(34,36,38,.15)'});$hintSearchContainer.css({'border':'1px solid #96C8DA','border-bottom' : '0px', 'box-shadow' : '0 2px 3px 0 rgba(34,36,38,.15)'});}//向上滑動動畫function animateUp(){$hintBlock.slideUp('fast',function(){$hintSearchContainer.css({'border':'1px solid #ccc'});});}//檢驗是否與輸入的重復(fù)function checkContainerHas(text){var flag = 0;$(".hint-input-span-container span").each(function(){if ($.trim(text) == $.trim($(this).text())) {flag = 1;return;}});return flag ? true : false;}//設(shè)置hint-input-span-container寬度function setHintSearchContainerWidth(){var hint_width = $hintSearchContainer.width() + 2 * parseInt($hintSearchContainer.css('padding-left').match(/[0-9]+/)[0]) + 2 * parseInt($hintSearchContainer.css('border-left').match(/[0-9]+/)[0]) ;$hintBlock.css({'width': hint_width});}//綁定click事件function addUlListener() {$hintUl.delegate('li','click',function(){var text = $(this).text();if(!checkContainerHas(text)) {$hintSearch.before('<span class="tag label label-primary">'+ text +' <i class="fa fa-times" data-role="remove"></i><i> </i></span>');addSpanListenr();}$hintSearch.val("");animateUp();})}//監(jiān)聽 span事件function addSpanListenr() {$(".hint-input-span-container span").delegate("i",'click',function(){$(this).parent().remove();})}})