无可奈何的开始了jquery的“奇淫技巧”

转载请注明出处： https://home.cnblogs.com/u/zhiyong-ITNote/

修改一个已有的项目，主要是前端方面，一般的项目后端都是处理好了的，不需要改也不能改，除非特殊需求。然后就遇到了牛逼的代码。本来看别人已有的代码做开发就是一件很头疼的事，一个函数一个方法一个属性的找，眼睛疼....然后今天改代码还特别头疼，大概说说：
首先不能使用jquery-ui的自动补全插件，换句说话，所有的第三方模糊匹配/自动补全插件都不能用，但是给我懵的。ajax将请求post到C#后端随后获取数据，传到前端之后，一大串的数据，需要你在一个文本框中边检索边做模糊匹配，本来很好解决的一个事，直接使用jquery-ui的autocomplete就行，但是不行，就不让，我有啥办法，然后就自己想辙解决问题。没有特定的环境，我们就不会有对应的解决方法，更不会尝试去解决，最后解决它。我的方法是，监听input标签的写入事件，然后获取写入的值，将值与从后台获取到的数据进行匹配，匹配成功，再动态生成div以下拉列表的形式填充到输入框下面。但是遇到个问题，input框检索的是Name字段，不是一个字符串而是字符，就是我们的string类型——"hello world"之类的。那么应该怎么解决呢？我想到了数据结构书上的字符串匹配算法KMP，于是查了下jquery的匹配方法，果然有一个match，这就可以给我们解决问题了。通过这两个解决方案就可自定义的创建自动补全了。

还有一个问题，那就是input标签的placeholder属性需要实时变换，明明这个属性就支持你写入Input它就消失，你不写入它就存在。可以由于项目的已有代码问题，我实在是被坑的没辙，又不能改，只能加，然后就想对应的解决方法。我的解决方案是监控div：
一开始，div下嵌套着input，在input中写入的时候，就会产生上面我们的自动补全下拉框（其实就是一个动态的div），一旦我们选中了一个下拉框的元素，那么会在该div下生成一个span标签，也就是说，input的placeholder属性的值还存在，这代码设计....坑的是后来人....然后我该怎么解决？监控div就行。如果div下生成了一个span标签那么我们就是将input的placeholder设置为''.否则就设置为'必填字段'。代码拷贝不出来，因为在公司内网机上....

参考资料：
监听div的内容 
字符的模糊匹配 
查找span标签是否存在 
动态添加div，及其显示与隐藏
input标签监听写入 

根据参考资料就可以实现我上面说的那些了，具体请看具体分析。

 

转载请注明出处： https://home.cnblogs.com/u/zhiyong-ITNote/

更多专业前端知识，请上 【猿2048】www.mk2048.com