今天是2018年4月17号，忽然心血来潮想要写点东西，用来记录自己的学到的知识，不知道能不能坚持下来。
前几天自己做了一个基于jQuery的穿梭框插件，用了大约七八个小时，个人觉的技术含量不是很高，但还是可以使用的
用到的知识点有：jQuery的显示和隐藏方法，hide()方法和show()方法，hide()方法用于隐藏html元素，show()方法用于显示元素，其主要用在根据条件搜索时只显示符合条件的选项。
而完成搜索的核心是实时获取输入框的值，jQuery的 on('input propertychange', function() {}）方法，用于实时监听输入框value，通过字符串比较方法 indexOf()，来比较输入的值与列表中的值进行比较，当比较的结果大于等于0时，说明这一项符合搜索条件，将这一条显示。
而左右移动的功能就更加简单了，只要将选中的项先push到一个数组中，然后将选中的项删除，最后遍历数组，将数组中的每一项append到另一边就可以了。
```
//监听左侧输入框内容变化
$('#leftinput').on('input propertychange', function() {
var dataval = $('#leftinput').val();
var lis = $('#leftul li');
if(dataval.length > 0) {
lis.hide(); //隐藏所有的li标签
for(var i = 0; i < lis.length; i++) {
//lis.eq(i)[0].innerText.indexOf(dataval)：判断是否含有目标字符串
if(lis.eq(i)[0].innerText.indexOf(dataval) >= 0) {
lis.eq(i).show(); //显示符合条件的li标签
}
}
} else {
lis.show();
}
})
```
不知道为什么，不能以代码框的形式显示。。。QAQ
CSS方面，使用了美化后的多选框，以及使用了基于jQuery的滚动条美化插件：jquery.nicescroll.min.js，因为使用overflower: auot;生成的滚动条有点丑。
使用非常简单，$("html").niceScroll();即可引用，需要注意的是，每次渲染列表时，要重置滚动条的大小。 $("html").getNiceScroll().resize();
网友评论