我的天

之前说到，级联下拉菜单的select2插件当它觉得下面的空间不足的时候，就会把下拉菜单变成上拉菜单。我不知道设计者到底是怎么想的，我也不知道为什么使用的人为什么不觉得这个操作不太对，可能是我比较古板吧。我没有限定那个网页的最大高度，所以实际上这个网页的高度是无限的，不存在空间不足的问题。以我的水平也没办法去了解这个select2插件到底是如何判断空间到底是不是不足。

一开始我用的是mini版本，就是所有代码都挤在一起，之前我觉得标准版本跟mini版的区别在于mini版里面没有了注释、回车、缩进，仅此而已，但是当我在mini版里面找不到网友提到的某个东西的时候，我就怀疑是不是除了上面我提到的以外，min版跟标准版还有其它的区别。要在min版密集的字符里面找到某些东西非常的困难，哪怕你已经不是用肉眼去找，而是使用搜索功能，所以我又下载了一个标准版，结果发现原来二者真的有区别，区别还不少。在搜索标准版的时候，我找到了判断是否空间不足需要转换上拉下拉的各种操作，但是在mini版里面完全没说清楚，而且所有的变量都非常简洁，只有一个字母，你根本猜不出那到底是什么。

所以我首先是在标准版里进行我想要的修改，结果发现可以了，但是我却没办法在mini版里找到完全一致对应的部分。标准版跟mini版体积差了一倍，但实际上标准版也不过是150KB而已，很小。我尝试过直接把标准版拿去压缩，结果出来的东西好像vscode不太承认，虽然在mini版里还没有找到修改的方法，但起码我有标准版的修改方案。

除了下拉菜单以外，还有第三层选项搜索栏的自动对焦的问题。只要打开第三层菜单，光标就会自动的对焦到搜索栏，这就意味着手机的虚拟键盘会马上弹出。这会大大降低了手机屏幕的高度。如果虚拟键盘不弹出，你直接可以从下拉菜单里面选择的那些东西你不得不麻烦地把虚拟键盘最小化掉。这个操作跟聚焦搜索框会扩大屏幕字体一样，让人烦恼。所以我要做的是当我点击第三层菜单的时候，下拉列表有搜索框，但是光标不聚焦在那里，这就意味着，如果第三层菜单只有几个选项，用户可以直接点击选项，不会有虚拟键盘的弹出。在我们现在整理的数据当中，第三层菜单绝大多数选项都只有几个，可以直接一目了然展示完毕，极少需要调用到滚动下拉菜单。之所以要在第三级菜单里面做一个搜索框，是因为有那么极少数的选项数量很多的，会在10个以上，会让那个地方出现滚动的下拉菜单。因为选项很多，如果可以有对选项进行搜索的功能，显然会方便很多，所以我的目标是第三层选项有搜索框，但弹出的时候搜索框不聚焦，但你可以手动点击搜索框，然后在里面输入获取你想要的结果。这个东西说起来好像挺简单，但实际上要真的做到，还真不只是输入框自动聚焦的问题。后来，我在毫无办法之下，又去研究select2标准版的时候才发现，让我无论如何设置输入框都不能解决的原因是让输入框那么顽固的东西不在输入框本身那里。最后我替换了一些写着focus的东西，终于，第三层带有输入框的下拉菜单在打开的时候焦点不再自动固定在输入框那里了。

我也不想修改select2脚本本身，我尝试过很多方法实现我想要的效果，但最终宣告失败，所以我也就只能手动修改标准版。套件使用起来的确很舒服，但未必跟你的项目完全匹配，当你要做微调的时候，可能会碰壁很多次才最终能实现你的效果。

说了两天的Power Query方案不完美，大概就那些了。今天来说一下级联下拉菜单网站的不完美。

就功能来说，实际上都已经能实现了，但关键是有些部分好像，我无论如何控制不了，就电脑的展示效果来说，没什么好纠结的，但是手机的展示效果，却让人觉得好像总差那么一点点。

首先让我烦恼是在不同浏览器之下，搜索输入框会自动对焦。在小米自带的浏览器之下，不知道为什么那个下拉的选择框会变窄。firefox手机浏览器之下，整个页面变大，无论我怎么调节网页的字体大小都没办法阻止 firefox手机浏览器的这个自动变大。最后发现，原来这是手机浏览器的臭毛病，他们觉得输入时字体太小，你看不清，所以要自动变大，但自动变大会让网页的展示效果发生扭曲，变大了以后，当我不再聚焦在那个输入框，不会自动把网页缩小，这就让人很头痛。小米自带浏览器之下，当你的焦点不在那个搜索框的时候，下拉菜单的宽度又正常了。虽然这两个测试的浏览器实际上都不会影响最终的结果，你要查找的东西最终还是能看到，但关键是非常影响用户的使用体验。如果是小米自带的浏览器，感觉虽然丑一些，但还是能够做到，但如果是遇到firefox手机浏览器，你必须用双指把网页缩小，这就让人觉得很麻烦，而且缩小了以后，当我再次点击搜索框，还是会变大，简直可以把这个东西称之为恶心。

在我发现这个是手机浏览器的臭毛病以后，我就直接在meta那里加入了禁止缩放的命令。搜索框聚焦会让网页放大缩小的问题彻底解决了，但这里只能说在安卓手机之下彻底解决了，至于苹果会不会有这种臭毛病，不知道。因为我手边没有可以用来测试的苹果设备。根据单位会计的反映，使用苹果手机的人比例不算太多。虽然我不知道她说的这个比例是怎么算出来的。因为单位的人用苹果手机的比例跟经常报销的人用苹果手机的比例可能是两个完全不一样的数字。但也可以换个角度考虑，那些用苹果手机的人如果手机体验感真的很差，那么就请他们在电脑上完成这个查询的步骤。毕竟需要经常报销的人通常不可能长期不接触办公室的电脑。

解决网页放大缩小的问题后，另外一个烦恼又涌出来了，理论上那是一个下拉菜单，但实际上不知道为什么，有时手机会弹出一个上拉菜单。如果上拉菜单完全没有问题也可以说得过去，关键是上拉菜单有时会出现一些格式上的异常，为什么明明是下拉菜单就变成了上拉菜单呢？据说这是select2插件的一个自动判断，当它觉得下面空间不足的时候，就会采用上拉菜单。这种情况通常发生在我要下拉一个菜单，那个菜单刚好是有搜索功能的，当那个菜单打开以后，手机会自动弹出输入法，所以这就意味着手机屏幕的高度突然间没有了1/3或以上，于是不知道为什么，网页就判断下面的空间不足，把那个东西变成上拉。有些时候，你明明知道下面的空间足够，但因为之前几回都是上拉，所以这一次有空间，也不下拉，要展示为上拉。我个人觉得挺反人类。电脑上没有发生过这种问题，但在手机浏览器上，却说不准什么时候会出现这种状况。理论上我要做的就是强制把菜单限定为只能下拉，但实际上好像插件又没有一个明确的控制方法让我轻易做到这个。

目标是明确的，道路是曲折的。

当我把级联下来网页做出来了以后，发现原来核心数据并没有四层那么多，只有三层，所以我首先简化了一下那个东西。当我把核心数据转换，并套用进去以后，发现有些选项实在太多，有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层选项很少，我没有必要提供搜索功能，还有就是在不同的手机浏览器之下，在搜索的时候会自动进行一些放大的操作，然后就会导致整个页面变得畸形，虽然通过手指的缩放可以改变，但是这种步骤会让人觉得很不爽。功能是实现了，但这种不愉快的操作必须的纠正过来。

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