这篇博客记录了作者2018年4月17日制作的一个基于jQuery的穿梭框插件，介绍了如何利用jQuery的显示隐藏方法、实时监听输入框变化的技巧以及左右移动功能的实现。核心技术包括hide()、show()方法，以及利用indexOf()进行搜索匹配。同时提到了CSS美化，包括多选框样式和jQuery滚动条插件jquery.nicescroll.min.js的使用。
今天是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标签
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
