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 相关文章推荐
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
js中for in的用法示例解析
Dec 25 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
jQuery UI实现动画效果代码分享
Aug 19 jQuery
vue项目中使用bpmn-自定义platter的示例代码
May 11 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
ES5和ES6中类的区别总结
Dec 21 Javascript
类和原型的设计模式之复制与委托差异
Jul 07 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
PHP 实例化类的一点摘记
2008/03/23 PHP
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
PHP pear安装配置教程
2016/05/14 PHP
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
python多线程操作实例
2014/11/21 Python
为python设置socket代理的方法
2015/01/14 Python
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
用 python 进行微信好友信息分析
2020/11/28 Python
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
应届毕业生的个人自我鉴定
2013/10/24 职场文书
大学生就业自荐信
2013/10/26 职场文书
就业协议书范本
2014/10/08 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
《社戏》教学反思
2016/02/22 职场文书
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server