转载请注明出处: 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/