ui組件之input多選下拉實現方法（帶有搜索功能）

我的風格，先上效果圖，如果大家感覺還不錯，請參考實現代碼。

廢話不說先看div層次結構

<!-- 最外層div 可以任意指定主要用於定義子元素寬度--><div><!-- 表單label 添加文字提示--><label for="">全文檢索</label><!-- 多選承接div 以後會動態添加span --><div><!-- 表單元素用來綁定監聽事件以及接收用戶輸入該層上方會動態添加span --><input type="text" name="hint-search" value="" placeholder="選定關鍵字或按下tab或按下enter來分割關鍵字"></div><!-- 包含下拉列表列--><div><!-- 根據json數據包動態添加li --><ul></ul></div></div>

dom結構註釋已經能說得清楚了，下面來看css

 * {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);di​​splay: 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;}

css中設置border-sizing:border-box很重要，這個屬性可以使padding與border計算在width之中

.hint-input-span-container 設置display為inline-block也很重要，有關於tag的排列

.hint-block設置z-index為9999保證顯示在最前端，同時position為absolute保證其位置

其他的都可以根據自己需要調整

下面來看js代碼

$(function(){//json數據包var data = {data:["123","北京你好","北京歡迎您","北京好","海洋","海洋廣利局","我海洋","我吃驚","我啦啦啦啦","我不能忍","機構","日本","俄羅斯的山","埃塞俄比亞","伊巴卡","比比比"]};//獲取後面需要多次調用的dom對象var $hintSearch = $("input[name='hint-search']");var $hintSearchContainer = $(".hint-input-span-container");var $hintBlock = $(".hint-block");var $hintUl = $(".hint-ul");//初次調用添加詞典addDictionary(data.data,addUlListener);//設置詞典列表寬度setHintSearchContainerWidth();//實現響應式監聽resize事件$(window).bind('resize', setHintSearchContainerWidth);//獲得焦點$hintSearch.focus(function(){animteDown();});//失去焦點//設置延遲為了可以監聽到click的響應$hintSearch.blur(function(){setTimeout(function(){animateUp();},200);});//TAB 與enter事件//監聽tab與enter兩個鍵位如果input內有輸入的內容，則添加span//注意最後要阻止一下事件冒泡防止跳轉與切換焦點$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>'+ text +' <i data-role="remove"></i><i></i></span>');addSpanListenr();}//console.log($hintSearch.val());$hintSearch.val("");$hintSearch.focus();e.preventDefault();break;}default: ;}});//檢測輸入配對//對輸入內容在li中進行匹配如果包含字符串可以找到並返回//搜索方法可以自行修改，只要保證返回一個搜索後的數組即可$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);})//函數庫//添加用戶常用字典庫function addDictionary(dataarr, callback) {for(var i = 0; i < dataarr.length; i++) {$hintUl.append('<li>'+ dataarr[i] +'</li>');}callback();}//更新搜索內容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'});});}//檢驗是否與輸入的重複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;}//設置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>'+ text +' <i data-role="remove"></i><i></i></span>');addSpanListenr();}$hintSearch.val("");animateUp();})}//監聽span事件function addSpanListenr() {$(".hint-input-span-container span").delegate("i",'click',function(){$(this).parent().remove();})}})

重點就是對事件的監聽以及dom元素的操作，要依賴於jquery。

以上所述是小編給大家介紹的ui組件之input多選下拉實現方法（帶有搜索功能），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！