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

更新時間：2016年07月14日 09:38:26 作者：裕軒汪

這篇文章主要介紹了ui組件之input多選下拉實現(xiàn)方法（帶有搜索功能）的相關資料,需要的朋友可以參考下

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

這里寫圖片描述

廢話不說先看div層次結構

<!-- 最外層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="選定關鍵字或按下tab或按下enter來分割關鍵字">
</div>
<!-- 包含下拉列表列 -->
<div class="hint-block">
<!-- 根據json數據包動態(tài)添加li -->
<ul class="hint-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);
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;
}

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();
//實現(xiàn)響應式 監(jiān)聽resize事件
$(window).bind('resize', setHintSearchContainerWidth);
//獲得焦點
$hintSearch.focus(function(){
animteDown();
});
//失去焦點
//設置延遲為了可以監(jiān)聽到click的響應
$hintSearch.blur(function(){
setTimeout(function(){
animateUp();
},200);
});
//TAB 與 enter事件
//監(jiān)聽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 class="tag label label-primary">'+ text +' <i class="fa fa-times" data-role="remove"></i><i>&nbsp;</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 class="tag label label-primary">'+ text +' <i class="fa fa-times" data-role="remove"></i><i>&nbsp;</i></span>');
addSpanListenr();
}
$hintSearch.val("");
animateUp();
})
}
//監(jiān)聽 span事件
function addSpanListenr() {
$(".hint-input-span-container span").delegate("i",'click',function(){
$(this).parent().remove();
})
}
})

重點就是對事件的監(jiān)聽以及dom元素的操作，要依賴于jquery。

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

您可能感興趣的文章:

jQuery EasyUI API 中文文檔 - ComboGrid 組合表格
jQuery EasyUI API 中文文檔 - ComboGrid 組合表格,需要的朋友可以參考下。
2011-10-10
jQuery實現(xiàn)立體式數字動態(tài)增加（animate方法）
本文主要分享了基于jQuery實現(xiàn)立體式數字動態(tài)增加（animate方法）的實例代碼。有很好的參考價值，需要的朋友一起來看下吧
2016-12-12
使用Jquery實現(xiàn)點擊文字后變成文本框且可修改
使用Jquery實現(xiàn)點擊文字變?yōu)槲谋究蛐Ч蓪ξ谋究蛭淖诌M行修改，具體的實現(xiàn)思路如下，感興趣的朋友可以參考下，希望對大家有所幫助
2013-09-09
jquery 刪除節(jié)點添加節(jié)點找兄弟節(jié)點的簡單實現(xiàn)
下面小編就為大家?guī)硪黄猨query 刪除節(jié)點添加節(jié)點找兄弟節(jié)點的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-12-12
使用jquery插件實現(xiàn)圖片延遲加載技術詳細說明
有時我們看到一些大型網站，頁面如果有很多圖片的時候，當你滾動到相應的行時，當前行的圖片才即時加載的，這樣子的話頁面在打開只加可視區(qū)域的圖片，而其它隱藏的圖片則不加載，一定程序上加快了頁面加載的速度，對于比較長的頁面來說，這個方案是比較好的。
2011-03-03
jquery中對表單的基本操作代碼
jquery對表單的基本操作，里面對于checkbox等表單的獲取，都有很詳細的說明。
2010-07-07
一文帶你詳細了解jQuery
jQuery是一個JavaScript庫，它簡化了客戶端JavaScript編程的過程，特別是針對HTML文檔遍歷和操作、事件處理、動畫效果和Ajax操作。感興趣的小伙伴可以參考閱讀
2023-04-04
jquery實現(xiàn)隱藏與顯示動畫效果/輸入框字符動態(tài)遞減/導航按鈕切換
jquery實現(xiàn)隱藏顯示層動畫效果、仿新浪字符動態(tài)輸入、tab效果等等，以下為所有代碼，感興趣的朋友可以練練手哈，希望對大家學習有所幫助
2013-07-07
jQuery實現(xiàn)的網頁右下角tab樣式在線客服效果代碼
這篇文章主要介紹了jQuery實現(xiàn)的網頁右下角tab樣式在線客服效果代碼,涉及jQuery簡單樣式變換控制技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-10-10
jquery+ajax+C#實現(xiàn)無刷新操作數據庫數據的簡單實例
本篇文章主要是對jquery+ajax+C#實現(xiàn)無刷新操作數據庫數據的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02