ui组件之input多选下拉实现方法(带有搜索功能)


Posted in Javascript onJuly 14, 2016

我的风格,先上效果图,如果大家感觉还不错,请参考实现代码。

ui组件之input多选下拉实现方法(带有搜索功能)

ui组件之input多选下拉实现方法(带有搜索功能)

ui组件之input多选下拉实现方法(带有搜索功能)

废话不说 先看div层次结构

<!-- 最外层div 可以任意指定 主要用于定义子元素宽度 -->
<div class="col-xs-10" style="width:800px">
<!-- 表单label 添加文字提示 -->
<label for="" class="label-control">全文检索</label>
<!-- 多选承接div 以后会动态添加span -->
<div class="hint-input-span-container">
<!-- 表单元素 用来绑定监听事件以及接收用户输入 该层上方会动态添加span -->
<input type="text" name="hint-search" value="" placeholder="选定关键字或按下tab或按下enter来分割关键字">
</div>
<!-- 包含下拉列表列 -->
<div class="hint-block">
<!-- 根据json数据包动态添加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();
//实现响应式 监听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 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: ;
}
});
//检测输入配对
//对输入内容在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> </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多选下拉实现方法(带有搜索功能),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Js获取数组最大和最小值示例代码
Oct 29 Javascript
JavaScript实现select添加option
Jul 03 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 Javascript
Vue+Element-U实现分页显示效果
Nov 15 Javascript
全面了解addEventListener和on的区别
Jul 14 #Javascript
js计算系统当前日期是星期几的方法
Jul 14 #Javascript
原生javascript 学习之js变量全面了解
Jul 14 #Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 #Javascript
AngularJS实用开发技巧(推荐)
Jul 13 #Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 #Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 #Javascript
You might like
星际流派综述
2020/03/04 星际争霸
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
Oracle 常见问题解答
2006/10/09 PHP
php将会员数据导入到ucenter的代码
2010/07/18 PHP
php文件操作实例代码
2012/05/10 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
php实现zip文件解压操作
2015/11/03 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
PHP页面间传递值和保持值的方法
2016/08/24 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
csdn 博客的css样式 v3
2009/02/24 Javascript
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
如何快速上手Vuex
2017/02/14 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
opencv实现图像平移效果
2021/03/24 Python
前台文员岗位职责
2013/12/28 职场文书
《雪儿》教学反思
2014/04/17 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
小学开学标语
2014/07/01 职场文书
单位委托书怎么写
2014/09/21 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
投诉信范文
2015/07/02 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
利用Apache Common将java对象池化的问题
2022/06/16 Servers