2024-04
30

带搜索功能的select

By xrspook @ 9:01:00 归类于: 烂日记

当我把级联下来网页做出来了以后,发现原来核心数据并没有四层那么多,只有三层,所以我首先简化了一下那个东西。当我把核心数据转换,并套用进去以后,发现有些选项实在太多,有20个以上。这是非常之让人崩溃绝望的,如果你还不知情,你要在20多个东西里面找到你想要的这个东西,非常不容易。所以那一刻我就在想,为什么那个下拉菜单除了单选以外不能进行选项的搜索呢?实际上,有些网站的前端设计的确是具备这个功能的。在不同的系统下,实现这个功能的方式不一样,可以肯定的是在js下,在jQuery的加持之下,是可以实现这个功能的。据说方法也很简单,只要加一个js框架以及它对应的css就能做到。

理想很丰满,现实很骨感,经常会发生这种事情。当你看到那个例子的时候,当你尝试使用的时候觉得真挺不错,可以用在自己的东西上面,但是当js框架和css都引用过去以后发现跟自己的网站水土不服。有些东西直接就不见了,有些东西直接就变了个样,完全不受控。

传统的select不可以进行多选以及选项搜索,但是加强版的select就可以做到这个效果,那个经典的js框架叫select2。非常好理解,就是select的加强版。用方式也很简单,只要声明一下就可以了,但关键是无论是框架还是框架配套的css,如果你不想全部都要,只想选取其中有用的部分。这几乎是不可能的,起码我觉得以我的水平,我是不可能把那些东西筛选出来,所以只能全套引用。

之前已经说过,经典使用场景中,select下的option没办法直接加特效。因为那个东西不受css的直接控制,基本可以这么说,是一个失控的状态。所以要实现那个功能,大家的方案就是用一些li和span之类的东西从视觉上代替调声,但实际上当你选择的时候,你选择的内容依然是option的东西,但你看到的那些东西带有特效的玩意不是option本身。select2就是用了这种方法。select2可以多选,也可以对选项进行搜索,其强大之处当然不仅仅是美化一下那个不可控的option。

当我搜索可搜索的select的时候,我就遇到过select2,但因为它太强大,放上去又不太合适,所以我pass掉。取而代之地,我开始去研究一个相对来说貌似简单很多的国产版本,但是国产版本,相对于select2来说瑕疵也是比较明显的。因为select2已经经过了很迭代更新,经过很多人的共同开发,所以我遇到的问题之前的人几乎已经遇到过,所以当我搜索那些的时候基本能找到答案,而那个国产的版本,虽然看上去比较简单,但实际上用起来的时候会让你有无数问号,同时也找不到答案。

最终我用了最新版本的select2,然后成功地把自己的经典款级联下拉改成了可搜索版本。接下来,我要对那三个搜索框精准控制,比如第1层跟第2层选项很少,我没有必要提供搜索功能,还有就是在不同的手机浏览器之下,在搜索的时候会自动进行一些放大的操作,然后就会导致整个页面变得畸形,虽然通过手指的缩放可以改变,但是这种步骤会让人觉得很不爽。功能是实现了,但这种不愉快的操作必须的纠正过来。

你越想,就会遇到越多的问题,但这是好事。

© 2004 - 2024 我的天 | Theme by xrspook | Power by WordPress