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怎么把&amp;字符换成&quot;&amp;amp:&quot;
Oct 19 Javascript
jQuery ui 1.7更新小结
Aug 15 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
全面了解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/08/27 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
儿媳婚宴答谢词
2014/01/14 职场文书
销售经理岗位职责
2014/03/16 职场文书
计生工作先进事迹
2014/08/15 职场文书
争先创优活动总结
2014/08/27 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
文明礼貌主题班会
2015/08/14 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python