自动补全框架

发布时间:2016-09-30 16:17:19   来源:文档文库   
字号:

文本框自动补全(简单实现)

经常在做一些后台查询的时候会使用一些文本框 ,如果对于文本框所需要输入的内容不清楚的时候就需要自动补全提示使用者,或者方便使用者不需要完整的输入,即可从提示中选择需要的信息然后查询。

使用方法:

1)引入文件

2 写好相应的输入框和div,隐藏的div需要加上auto_hidden的类名

TIPS:这里必须设置输入框的widthheight,否则插件可能无法正常工作,自动补全的div的宽度会根据输入框的宽度自适应

3)初始化

基本原理及代码分析:

主要是前端文本框数据修改内容通过ajax传入后端去数据库里面查询,将相似的数据传如到前端(注:数据格式为字符串数组),在前端通过正则去匹配当前输入的文本,取相似的显示在文本框下方的默认div中。

这里将文本框自动补全的相关的方法和属性进行了封装,方便使用和维护。

代码分析一:

这里这样写可以将显示的div自适应文本框的宽度和紧跟其下,不需要另外设置。

代码分析二(核心代码):

这里对输入的内容进行解析,在后端传过来是信息数组中进行对比,相似的显示的div中并将相同的用加粗表现出来,供选择。当窗口被调整时,会重新初始化这个插件。

这里其中有个不足点,里面没有进行智能排序,只是简单的按数组顺序显示相类似的数据,需要在后面改进。

autocomplete.js文件内容展示

autocomplete.css中的内容

本文来源:https://www.2haoxitong.net/k/doc/d74dcec86037ee06eff9aef8941ea76e58fa4a01.html

《自动补全框架.doc》
将本文的Word文档下载到电脑,方便收藏和打印
推荐度:
点击下载文档

文档为doc格式